如何使用 ng-repeat 和 foreach 进行 2 向绑定？

Question

我在使用带有路由、视图和 ui-bootstrap 的 angularjs 方面取得了相当好的进展，但现在我正在处理范围数据和双向绑定，我遇到了一些麻烦。使用 ng-repeat，我发现您还可以将循环绑定到控制器中的 foreach 以进行额外处理，因此我试图让两者一起工作。

我一直在尝试找出 angularjs ng-repeat 中的范围。我有一个人员列表，每个人都有一个 weekSchedule 对象，我在其中构建了一个代表一周日程安排信息的表格。

我循环人员列表（外部），然后循环编号为 1 - 7（内部）的数组。日程表数据包括一个“星期几”数字以匹配日期数，然后有一些逻辑可以用日程表时间填充信息，或者如果不匹配则将其留空。但该逻辑的细节在这里并不重要。为此，在迭代内部循环时，我需要每个特定人员的 weekSchedule 数据都在范围内。所以我制定了一个更基本的例子来看看。

我已经阅读了很多关于此的内容，但找不到解决方案。我已经尝试了一百万种方法，但没有任何效果。我尝试过 rootScope、$parent、broadcast、setter & getter、设置人员、然后通过函数调用内部循环代码等。

对于我的表，我尝试通过 ng-init 和 ng-model 在范围内设置 weekScedule。还有一个带有'day.weekSchedule=person.weekSchedule'的'child scope ng-init'。有了这个，它就可以将对象放入 View 模板中的范围内，但只是最后一个对象。所以第一次外迭代中的对象有错误的对象。

<table width="100%" border="1">
    <tr ng-repeat="person in scheduleData">
        <th ng-init="setWeekSchedule(person.weekSchedule)">{{person.name}}</th>
        <!-- th>{{person.name}}</th -->
        <!-- td width="12%" ng-repeat="day in dayNumbers" ng-model="person.weekSchedule" -->
        <td width="12%" ng-repeat="day in dayNumbers">
            <span ng-init="day.weekSchedule=person.weekSchedule"></span>
            day.id: {{day.id}}<br />
            1st schedule id: {{day.weekSchedule[0].id}}
        </td>

    </tr>
</table>


$scope.dayNumbers = [{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7}];

$rootScope.person = {
    weekSchedule: [{ id: 0 }]
};

$rootScope.setWeekSchedule = function(weekSchedule) {    
    $rootScope.person.weekSchedule = weekSchedule;
};

$scope.dayNumbers.forEach(function(day){
    day.weekSchedule = $rootScope.person.weekSchedule;
    console.log('day.id: ' + day.id);
    console.log('1st schedule id: ' + day.weekSchedule[0].id);
});

$scope.scheduleData = [
    {"id":"1","name":"Jim","weekSchedule":[
    {"id":"1001","dow":"1","scheduleDate":"01/08/2016"},
    {"id":"1002","dow":"2","scheduleDate":"01/09/2016"},
    {"id":"1003","dow":"4","scheduleDate":"01/11/2016"},
    {"id":"1004","dow":"5","scheduleDate":"01/12/2016"}]},
    {"id":"1","name":"Kim","weekSchedule":[
    {"id":"1005","dow":"2","scheduleDate":"01/09/2016"},
    {"id":"1006","dow":"3","scheduleDate":"01/10/2016"},
    {"id":"1007","dow":"5","scheduleDate":"01/12/2016"},
    {"id":"1008","dow":"6","scheduleDate":"01/13/2016"}]}
];

无论我如何在控制器中设置计划，我都无法在视图迭代中正确访问它。无论我如何在 View 中设置计划，我都无法在 Controller 中正确访问（和处理）它。

Answer 1

创建一个构建交叉引用的函数。

$scope.xref = function(schedule) {
    var xref = {};
    angular.forEach(schedule, function(entry) {
        xref[entry.dow] = entry;
    });
    return xref;
};

在模板中使用该函数。

<td width="12%" ng-repeat="day in dayNumbers">
    day.id: {{day.id}}<br />
    1st schedule id: {{xref(person.weekSchedule)[day.id].id}}
</td>

DEMO on JSFiddle。