如何使用ng-repeat和foreach获得双向绑定？

Question

我一直进展相当好与路线angularjs，观点& UI的引导，但现在，我与范围数据和双向绑定，我有一些麻烦的工作。用ng-repeat，我发现你也可以将循环绑定到你的控制器中的foreach来做额外的处理，所以我试图让这两个一起工作。

我一直在试图找出范围，angularjs NG重复。我有一个人名单，每个人都有一个weekSchedule对象，我在那里建立一个表格，表示一周的时间表信息。

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

我读过有关这不少东西，但无法找到一个解决方案。我试过一百万种方法，但没有任何效果。我试过rootScope，$父，广播，制定者&干将，设置人，然后通过功能调用内环代码，等等，等等

用我的表，我试过设置范围的weekScedule通过ng-init ng-init。还有一个'使用'day.weekSchedule = person.weekSchedule'的子范围ng-init。通过这种方式，它可以将对象获取到视图模板的范围内，但仅限于最后一个对象。因此，第一个外迭代中的对象具有错误的对象。

<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"}]} 
]; 

无论我如何在控制器设定的时间表，我不能正确地查看迭代访问它。无论我如何在视图中设置时间表，我都无法在控制器中正确访问（并处理）它。

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。