0

I am generating some checkboxes using ng-repeat like this

<input type="checkbox" ng-repeat="item in items" id="{{item.id}} />

There are some 10+ checkboxes, I want to remove disabled class from a button if any one of the checkboxes is checked.

I have tried like this but not working

<input ng-model="master" type="checkbox" ng-repeat="item in items" id="{{item.id}} />
<input type="button" ng-class="{disabled: !master}" value="Click Me" />
coure2011
  • 40,286
  • 83
  • 216
  • 349

1 Answers1

0

Each checkbox should have its own ng-model. Here's an example of how this could be done::

<input type="checkbox" ng-repeat="item in items" id="{{item.id}} ng-model="item.selected"/>

Then you need to create a function in your controller which checks if none of the checkboxes are checked:

$scope.areAllUnchecked = function() {
  // loop through all the chcekboxes, return true if all are unchecked
  for (var i = 0; i < $scope.items.length; i++) {
    // ...
  }
}

Finally, use this function in your ng-class:

<input type="button" ng-class="{disabled: 'areAllUnchecked()'}" value="Click Me" />
MW.
  • 12,550
  • 9
  • 36
  • 65
  • Actually was trying to avoid creating some method like areAllUnchecked. If I can create a method then I can directly attach method to checkbox like ng-onclick="areAllUnchecked"... – coure2011 Apr 25 '14 at 06:33
  • 1
    @coure2011 What's the point of having checkboxes without any model? Here's a plunkr demonstrating the above idea: http://plnkr.co/edit/puGDSHabwMKV0tmLTVKH?p=preview – JB Nizet Apr 25 '14 at 06:34
  • @coure2011: You can avoid the function if you have another variable in the $scope (for example $scope.allUnchecked) where you store whether all checkboxes are unchecked. Then you need to $watch all items, and set the appropriate value (true or false) in $scope.allUnchecked whenever a checkbox is checked/unchecked. This might provide a small improvement in performance, but unless you really _need_ better performance it is adding unneccessary complexity. – MW. Apr 25 '14 at 08:17
  • 1
    @coure2011: Also, it is generally a bad idea to use the onclick like `ng-onclick="areAllUnchecked"`. This will only run if the user clicks the checkbox, so it will break if you update the value in $scope from javascript. – MW. Apr 25 '14 at 08:19
  • @MW. btw the method areAllUnchecked is running 3-4 times on page load and if ng-click is used it will run only once... but the problem with ng-click is that ng-model sets the value after ng-click finished – coure2011 Apr 25 '14 at 10:24
  • @coure2011: True, areAllUnchecked will run _a lot_. At least twice every time the scope is digested. Since AngularJS is built on dirty-checking the scope whenever something happens in the browser, areAllUnchecked will run basically all the time. But ng-class, ng-repeat, ng-model etc all use functions in the background which run all the time as well. It's how Angular works, and you kind of have to roll with it: http://stackoverflow.com/questions/9682092/databinding-in-angularjs/ – MW. Apr 25 '14 at 11:20