Two way binding in a list of checkbox in angular JS

Question

In the following, I retrieve a list of object from which a list of check box are created. Depending on the IsActive(Boolean) column value its either checked or unchecked.

 <div class="col-xs-12">
    <div class="col-xs-12" ng-repeat="x in Nodes" ng-model="Locations">
        <input type="checkbox" style="width:auto" ng-checked="x.IsActive"/>
        <label style="width:auto">{{x.NodeName}}</label>
    </div>
</div>

here is the function where I am fetching Objects in Nodes list.

 $scope.GetNodes = function () {

             var nodeUrl = baseUrl + 'api/RoleNodeAccess/GetRoleNodeAccessDetails/?roleId=' + $scope.role;

             $http({ method: 'get', url: nodeUrl }).then(function success(response) {
                 $scope.Nodes = response.data;
             }, function failed(response) {
                 console.log('Failed getting nodes.');
             })
         }

The issue here is, whenever the state of check box changes, its not reflected in Nodes list. Am I missing something.

Thanks in Advance.

Hadi Ranjbar · Accepted Answer · 2017-10-13 19:06:47Z

1

It seems that you should use ng-model within your checkbox something like this:

<div class="col-xs-12">
    <div class="col-xs-12" ng-repeat="(i, x) in Nodes track by $index" >
        <input type="checkbox" style="width:auto" ng-model="Nodes[i].IsActive" ng-checked="x.IsActive"/>
        <label style="width:auto">{{x.NodeName}}</label>
    </div>`enter code here`
</div>

edited Oct 13, 2017 at 19:06

answered Oct 11, 2017 at 16:05

Hadi Ranjbar

1,8224 gold badges25 silver badges44 bronze badges

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

2 Comments

Skye Over a year ago

still not working, Nodes List remains the same as it is.

Hadi Ranjbar Over a year ago

@Skye I changed my answer a little bit and now it works. I tested it.

Collectives™ on Stack Overflow

Two way binding in a list of checkbox in angular JS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related