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 i.e 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 ?

31piy · Accepted Answer · 2018-03-29 05:47:12Z

2

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.

edited Mar 29, 2018 at 5:47

answered Mar 29, 2018 at 5:40

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rushabh Sheth Over a year ago

Great That Work, can you explain me the last part of flitering and mapping you have done

31piy Over a year ago

@RushabhSheth -- Read Array#filter and Array#map.

Rushabh Sheth Over a year ago

facing issue in npm install, it throughs error or remaining package , note i am angular.js v1.69

31piy Over a year ago

@RushabhSheth -- My solution works for AngularJS 1.6x. Failing npm install is not in the scope of this post. You might want to check package.json and create another question for the help related to the issue.

Sunil · Accepted Answer · 2018-03-29 07:12:52Z

0

<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>

answered Mar 29, 2018 at 7:12

Sunil

1382 silver badges15 bronze badges

2 Comments

Rushabh Sheth Over a year ago

thanks for the reply but it only return true and random checkbox gets selected on clicking one

Sunil Over a year ago

remove ng-model="x.id" from checkbox then it will work fine. like below <input id="check-{{x.id+9}}" type="checkbox" class="checkbox"ng-change="checkTimeslot(x.id)">

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related