Disable remaining checkboxes when n checkboxes have been checked with AngularJS - angularjs

Question

I'm just starting to learn AngularJS, so bear with me.
I have an app with a list that's bound to an array of objects (D&D spells). That list displays all the contents of the objects, by binding to the various values of the object. They filter on the value of a search textbox (query) and are sorted by two properties of the spell objects (level and name). That all works fine.
<div ng-repeat="(spellKey, spellValue) in spells | groupBy:'level'">
<a id="level-{{spellKey}}" class="anchor"></a>
<div ng-repeat="spell in spellValue | filterEach:query | orderBy:['level','name']">
<a id="spell-{{spell.name | replaceSpaces}}" class="anchor"></a>
...
</div>
</div>
I have a second list that I put in my navbar that's bound to the same array. It displays just the names and a checkbox next to each name; the checkbox determines whether or not to list each object in the first list (by setting spell.prepared to true or false). This also works fine.
<div class="navbar-header">
<form class="form-inline navbar-left col-xs-10" role="search">
...
</form>
<div class="col-xs-2">
<!-- button that displays list of spell links and checkboxes -->
<button type="button" id="btn-toggle-navbar" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#spell-nav">
...
</button>
</div>
<div class="collapse navbar-collapse" id="spell-nav">
<div class="checkbox" style="padding-bottom: 4px;">
<label>
<input type="checkbox" id="cbHideNonPrepared" ng-model="hideNonPrepared" />
Hide non-prepared
</label>
</div>
<div ng-repeat="(linkKey, linkValue) in spells | groupBy:'level'">
...
<ul style="list-style-type: none">
<li ng-repeat="spellLink in linkValue" class="checkbox">
<label>
<input type="checkbox" ng-model="spellLink.prepared" ng-class="{true: 'invis'}[spellLink.alwaysPrepared || spellLink.level == 0]" />
{{spellLink.name}}
</label>
</li>
</ul>
</div>
</div>
</div>
...
<!-- previous code block with added 'ng-hide' -->
<div ng-repeat="(spellKey, spellValue) in spells | groupBy:'level'">
<a id="level-{{spellKey}}" class="anchor"></a>
<div ng-repeat="spell in spellValue | filterEach:query | orderBy:['level','name']"
ng-hide="hideNonPrepared && !spell.prepared">
<a id="spell-{{spell.name | replaceSpaces}}" class="anchor"></a>
...
</div>
</div>
Last, I want to limit the number of checked checkboxes allowed to some value assigned in $scope (happens to be 9, but can be in arbitrary integer). I also want to exclude any values where spell.alwaysPrepared == true, but I assume that's just a filter I can add later.
This is where I'm unsure how to continue. I thought maybe I should set ng-check, but I wasn't sure to what.

Answer 1

You can use ng-disabled to disable your checkboxes under certain conditions.
Below is an example of how this might work for you. The key here is to create a function that will be called every digest cycle to determine whether each checkbox should be disabled.
angular.module("spells", [])
.controller("spellController", function($scope) {
$scope.shouldDisable = function(spell) {
return $scope.numPreparedSpells() == $scope.maxPreparedSpells && !spell.isPrepared;
};
$scope.spells = [
{name: "Magic Missile", isPrepared: false},
{name: "Lightning bolt", isPrepared: false},
{name: "Cure Major Wounds", isPrepared: false}
];
$scope.maxPreparedSpells = 2;
$scope.numPreparedSpells = function() {
var numPrepared = 0, len = $scope.spells.length;
for(var i = 0; i < len; i++) {
if ($scope.spells[i].isPrepared) {
numPrepared++;
}
}
return numPrepared;
};
});
With this setup in place, your spell list HTML might look like:
<div ng-controller="spellController">
<div ng-repeat="spell in spells">
<input type="checkbox" ng-model="spell.isPrepared" ng-disabled="shouldDisable(spell)"/>{{spell.name}}
</div>
</div>
Try it on Plunker.
That showed the basic idea, but it would be nice to have an O(n) solution:
angular.module("spells", [])
.controller("spellController", function($scope) {
$scope.shouldDisable = function(spell) {
return $scope.numPrepared == $scope.maxPreparedSpells && !spell.isPrepared;
};
$scope.spells = [
{name: "Magic Missile", isPrepared: false},
{name: "Lightning bolt", isPrepared: false},
{name: "Cure Major Wounds", isPrepared: false}
];
$scope.maxPreparedSpells = 2;
$scope.numPrepared = 0;
$scope.updateNumPreparedSpells = function(spell) {
if (spell.isPrepared) {
$scope.numPrepared++;
}
else {
$scope.numPrepared--;
}
};
});
The trick is to call updateNumPreparedSpells every time a checkbox is clicked:
<input type="checkbox" ng-click="updateNumPreparedSpells(spell)" ng-model="spell.isPrepared" ng-disabled="shouldDisable(spell)"/>{{spell.name}}
Now, the list of spells doesn't need to be traversed to count the number prepared. This, of course, assumes that the prepared state of each spell can only be changed by a click on the checkbox. If the data can be changed elsewhere, the count could be incorrect. Such a scenario is comparable to the cache-invalidation problem, which is known to be hard.