Nested ng-repeat, collect checkbox info
HTML
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div ng-app='MyApp' class='container'>
<div ng-controller='MyCtrl'>
<div class='panel panel-default'>
<table class='table table-striped'>
<tr>
<th width="20%"></th>
<th width="10%" ng-repeat="day in persons[0].daysOfWeek">
{{day.name}}
</th>
</tr>
<tr ng-repeat="person in persons | orderBy: 'secondName'">
<td>
{{person.firstName + ' ' + person.secondName}}
</td>
<td ng-repeat="day in person.daysOfWeek">
<input type="checkbox"
name="{{day.name}}"
ng-model='day.checked'/>
</td>
</tr>
</table>
</div>
<input class='btn btn-primary' type='button' value='Save info' id='save-info' ng-click='saveInfo()' />
</div>
</div>
CSS
body { margin-top: 20px; }
table tr td:not(:first-child) { text-align: center; }
table tr th:not(:first-child) { text-align: center; }
JavaScript
var daysOfWeek = [ { name: 'Sun', checked: true }
,{ name: 'Mon', checked: false}
,{ name: 'Tue', checked: '' }
,{ name: 'Wen', checked: '' }
,{ name: 'Thu', checked: '' }
,{ name: 'Fri', checked: '' }
,{ name: 'Sat', checked: ''}];
var persons =
[{ firstName: 'Jil', secondName: 'Mith' }
,{ firstName: 'Alvin', secondName: 'Zurb' }
,{ firstName: 'John', secondName: 'Burt' }
,{ firstName: 'Tom', secondName: 'Kurtz' }];
/*persons.forEach(function(person) {
person.daysOfWeek = daysOfWeek;
});*/
persons.forEach(function(person) {
person.daysOfWeek =
// map - provides callback function for each element of the array
daysOfWeek.map(function(day) {
return angular.extend({}, day)
}); // extending the day object to a new object
});
angular.module('MyApp',[]);
function MyCtrl($scope) {
$scope.persons = persons;
console.log($scope.persons);
$scope.saveInfo = function() {
console.log($scope.persons);
};
}