I'm currently working on a loop that generates checkboxes from a collection. Everything works fine so far, but now I need to set a limit of 8 checkboxes that can be checked (while still displaying all checkboxes).
I attempted to use ng-model (and also tried ng-if) within the class as shown below, but the behavior is not what I expected.
HTML
<div class="col-xs-12 col-sm-4 " ng-hide="vm.resultCount === 0" ng-repeat="np in vm.corporations">
<div class="Checkbox">
<input type="checkbox" ng-click="vm.updateCart(np)"/>
<div class="Checkbox-visible" model="!vm.overEightCorporations">
CSS
> input:checked + .Checkbox-visible {
background: #000 url('../images/CheckMark_White.png') center/20px 20px no-repeat;
}
> input:focus + .Checkbox-visible {
}
JS
vm.overEightCorporations = function () {
if ($rootScope.cart.length > 7){
return true;
toastr.error('You can only set 8 corporations at a time.');
}
return false;
}
};
edit:
Additional JS after responses
vm.updateCart = function (corporation) {
var i = vm.inCart(corporation.id);
if (i < 0) {
$rootScope.cart.push(corporation);
} else {
$rootScope.cart.splice(i, 1);
}
};