Angular.js Bind ng-model with ng-repeat in input:checkbox

Question

I have an App using Angularjs v1.69 I Get a Json Response of Time Slot The below is the Current Code:

$scope.TimeSlotList = JSON.parse(localStorage.getItem("TimeSlots"));
Console.log($scope.TimeSlotList);

Output:

[
{
    "id": 1,
    "time": "7am - 10am"
},
{
    "id": 2,
    "time": "10am - 1pm"
},
{
    "id": 3,
    "time": "1pm - 4pm"
},
{
    "id": 4,
    "time": "4pm - 7pm"
},
{
    "id": 5,
    "time": "7pm - 10pm"
}
]

and this is done in the partial

        <div class="col-md-6">
                <div class="form_pad20">
                    <label>Prefered Time</label>
                    <div class="clearfix">
                        <div class="form-field field-destination">
                            <div class="radio-checkbox display_inline" ng-repeat="x in TimeSlotList">
                                <input id="check-{{x.id+9}}" type="checkbox" class="checkbox" ng-model="TimeSlotList[$index]">
                                <label for="check-{{x.id+9}}">{{x.time}}</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

The Required output is Whichever Checkbox is selected i want that value For Ex: if the user select time slot 2 and 3 i want to send 23 to the backend ie Timeslot-2 and Timeslot-3 should return true or something else i want output as

var FinalTime="23";

Trying to figure out from last 2 days But After Few Atempts basically th best solution was

ng-model="TimeSlot-{{x.id}}"

but this throughs error

Error: [ngModel:nonassign] Expression 'ScdItem.TSlot(x.id)' is non-assignable.

please can anybody help me ?

Answer 1

Change the TimeSlotList so that it contains a selected field. The initial value can be set to false .

$scope.TimeSlotList = JSON.parse(localStorage.getItem("TimeSlots"));
$scope.TimeSlotList.forEach(item => item.selected = false);

Then bind the selected field to the corresponding checkboxes using ng-model :

<input id="check-{{x.id+9}}" type="checkbox" class="checkbox" ng-model="x.selected">

This will change the selected 's value based on checkbox is checked/not checked. When you send the data to the server, you can extract the IDs of the slots based on the value of selected field, like this:

var selectedSlots = $scope.TimeSlotList
  .filter(slot => slot.selected) // Get all the selected slots
  .map(slot => slot.id) // Extract IDs of the slots
  .join(''); // Join the IDs to form a string

This way selectedSlots will contain the IDs of the slots selected.

Answer 2

<div class="col-md-6">
            <div class="form_pad20">
                <label>Prefered Time</label>
                <div class="clearfix">
                    <div class="form-field field-destination">
                        <div class="radio-checkbox display_inline" ng-repeat="x in TimeSlotList">
                            <input id="check-{{x.id+9}}" type="checkbox" class="checkbox" ng-model="x.id" ng-change="checkTimeslot(x.id)">
                            <label for="check-{{x.id+9}}">{{x.time}}</label>
                        </div>
                    </div>
                </div>
            </div>