<!DOCTYPE html>
<html ng-app="app">
<body ng-controller="ParticipantsCtrl as Participants">
<h1>Participants checked</h1>
<div ng-repeat="participant in Participants.list">
<label>
<input type="checkbox" ng-value="participant" check-list="Participants.checked">
{{participant.name}}
</label>
</div>
<br>
Participants.list = <pre>{{Participants.list | json}}</pre>
Participants.checked = <pre>{{Participants.checked | json}}</pre>
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<!--<script src="https://code.angularjs.org/1.4.4/angular.js"></script>-->
<!--<script src="https://code.angularjs.org/1.4.7/angular.js"></script>-->
<!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->
<script>
var app = angular.module('app', []);
function Participants() {
var self = this;
self.list = [
{ name: 'Adam' },
{ name: 'Amalie' },
{ name: 'Wladimir' },
{ name: 'Elodie' }
];
self.checked = [
self.list[0],
self.list[1]
];
}
app.controller('ParticipantsCtrl', Participants);
// See How can AngularJS bind to list of checkbox values? http://stackoverflow.com/questions/14514461
app.directive('checkList', function() {
return {
restrict: 'A',
scope: {
list: '=checkList',
value: '@'
},
link: function(scope, element, attrs) {
var handler = function(setup) {
// DEBUG
console.log('scope.value (from ng-value):', scope.value);
var checked = element.prop('checked');
var index = scope.list.indexOf(scope.value);
if (checked && index == -1) {
if (setup) element.prop('checked', false);
else scope.list.push(scope.value);
} else if (!checked && index != -1) {
if (setup) element.prop('checked', true);
else scope.list.splice(index, 1);
}
};
var changeHandler = handler.bind(null, false);
element.on('change', function() { return scope.$apply(changeHandler); });
var setupHandler = handler.bind(null, true);
scope.$watch('list', setupHandler, true);
}
};
});
</script>
</body>
</html>