CODEWITHSUNDEEP
javascriptangularjs
Tấn Đức Nguyễn
Tấn Đức Nguyễn

Reputation: 3

How can change $scope value in ng-repeat?

I have div ng-repeat:

<div ng-repeat="a  in list" ng-click="abc = !abc">
     //some code here
     <input type="checkbox" ng-model="abc">
</div>
<button ng-click="reset()"> reset </button>

I use ng-model pass value to check/uncheck checkbox. I have a button, when click it, all checkbox uncheck. I use $scope.abc=false; but nothing change. How can i change ng-model value ?

Upvotes: 0

Views: 537

Answers (2)

wardialer
wardialer

Reputation: 492

Your "abc" variable is a global one. You have to store the status as a property for every single object like already suggested.

Here a working example:

HTML 

  <div ng-repeat="item in list" ng-click="item.checked = !item.checked">
     <input type="checkbox" ng-model="item.checked">{{item.value}} (clickme!)
  </div>
  <button ng-click="reset()"> reset </button>

</div>

JS

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.list = [{value: 1}, {value: 2}, {value: 3}];
    var length = $scope.list.length;
    $scope.reset = reset;

    function reset() {

      for (var i=0; i<length; i++) {
       var item = $scope.list[i];
       item.checked = false;
      }
    }
}

(you can see it in action here)

Upvotes: 0

tpsilva
tpsilva

Reputation: 1463

The checkboxes are sharing the same model. Change the list to contain a checked property for each of the objects, then use it to handle which one is checked. Something like the following: 

<div ng-repeat="a  in list" ng-click="a.checked = !a.checked">
     //some code here
     <input type="checkbox" ng-model="a.checked">
</div>
<button ng-click="reset()"> reset </button>

Upvotes: 4

Related Questions