<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Multiple Checkboxes</title>
<style>
label {display: block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
</head>
<body>
<div ng:controller="MainCtrl">
<label ng-repeat="color in colors">
<input type="checkbox" ng-model="colorValues[color]"> {{color}}
</label>
<p>colorValues: {{colorValues}}</p>
<hr />
<label ng-repeat="user in users">
<input type="checkbox" ng-model="userValues[user.id]" value="{{user.id}}"> {{user.name}}
</label>
<p>userValues: {{userValues}}</p>
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope)
{
$scope.colorValues = {Blue: true, Orange: true};
$scope.colors = ['Red', 'Blue', 'Green', 'Orange', 'Yellow'];
$scope.userValues = {2: true, 3: true};
$scope.users = [{id: 1, name: 'Bill'}, {id: 2, name: 'Jean'}, {id: 3, name: 'Barb'}, {id: 4, name: 'Ron'}];
/*
what I'd like to see, both to preset the checkboxes initially and when reading them as they change:
$scope.userValues = [2,3]
*/
$scope.checkboxUtils =
{
set: function(name, values)
{
},
get: function(name)
{
var cbs = document.getElementsByName(name),
count = cbs.length,
values = [],
i;
for (i = 0; i < count; i++)
{
if (cbs[i].checked)
values.push(cbs[i].value);
}
return values;
}
}
});
</script>
</body>
</html>