Checklist validity
How to use checklist-model and set the validity of form if at least one checkbox is valid.
HTML
<script src="http://vitalets.github.io/checklist-model/checklist-model.js"></script>
<div ng-controller="DemoCtrl">
<form name="demoForm">
<label ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role.id"
name="role"
checklist-change="demoForm.role.$setValidity('required', user.roles.length > 0)"> {{role.text}}
</label>
<br>
<button ng-click="checkAll()">check all</button>
<button ng-click="uncheckAll()">uncheck all</button>
<button ng-click="checkFirst()">check first</button>
<br><br>
user.roles {{ user.roles | json }}
<br><br>
<button ng-disabled="demoForm.$invalid">Click me</button>
</form>
</div>
CSS
div[ng-app] { margin: 50px; }
label { display: block; }
JavaScript
angular.module("DemoApp", ["checklist-model"])
.controller('DemoCtrl', function($scope) {
$scope.roles = [
{id: 1, text: 'guest'},
{id: 2, text: 'user'},
{id: 3, text: 'customer'},
{id: 4, text: 'admin'}
];
$scope.user = {
roles: [2, 4]
};
$scope.checkAll = function() {
$scope.user.roles = $scope.roles.map(function(item) { return item.id; });
};
$scope.uncheckAll = function() {
$scope.user.roles = [];
};
$scope.checkFirst = function() {
$scope.user.roles.splice(0, $scope.user.roles.length);
$scope.user.roles.push(1);
};
});