如何使用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。