javascript - 带复选框的嵌套 ng-repeat

Question

我正在创建带有嵌套 ng-repeat 的表，但每列中的复选框在选中/取消选中时都有同步 react 。如何修复此行为，以便可以单独选中每个复选框？

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>

代码:

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

Answer 1

您为每个人分配相同的 daysOfWeek 数组，因此当您检查特定日期时，您会为每个人检查相同的对象(天)。 您可以通过使用 angular.extend 将新的一周数组映射到每个人来解决此问题。 ，因此您将为每个人获得一个新的日期对象:

persons.forEach(function(person) {
    person.daysOfWeek = daysOfWeek.map(function(day) { return angular.extend({}, day)}); // extending the day object to a new object
});

检查这个fiddle 。