mercredi 4 mars 2015

Nested ng-repeat with checkboxes

I'm creating table with nested ng-repeat but checkboxes in each column have synchronous reaction when being checked/unchecked. How to fix this behaviour so each checkbox could be checked on its own?


HTML:



<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>


Code:



var daysOfWeek = [ { name: 'Sun', checked: '' }
,{ name: 'Mon', checked: '' }
,{ 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;
});

angular.module('MyApp',[]);

function MyCtrl($scope) {
$scope.persons = persons;
console.log($scope.persons);

$scope.saveInfo = function() {
console.log($scope.persons);
};
}


The Fiddle is here


Aucun commentaire:

Enregistrer un commentaire