AngularJs - 引用多個ngRepeat的相同範圍屬性

Question

我有多個ngRepeats生成表內容，取決於用戶希望看到的視圖，使用不同的ngRepeat來生成表。當用戶切換其視圖，並且從DOM中刪除以下內容之一併添加另一個時，新的ngRepeat不會引用相同的pagination.filteredData陣列。

示例：Main是我的控制器，使用controller as語法。

<tr ng-if="Main.tableConfig.programGranularity == 'overall'" ng-repeat="item in Main.pagination.filteredData = (Main.data.overallData | filterByDateRange | filter: Main.tableConfig.generalSearch | orderBy: ['Date', 'Name']) | startFrom: Main.pagination.startAtIndex | limitTo: Main.pagination.pageSize"> 
    <td ng-repeat="column in Main.tableConfig.columnsConfig | selectColumnsByGranularity: Main.tableConfig.programGranularity"> 
     <span ng-if="!column.isDate" ng-bind="item[column.dataValue] | ifEmpty: 0"></span> 
     <span ng-if="column.isDate" ng-bind="item[column.dataValue] | date:'MM/dd/yyyy': 'UTC' | ifEmpty: 0"></span> 
    </td> 
</tr> 

<tr ng-if="Main.tableConfig.programGranularity == 'team'" ng-repeat="item in Main.pagination.filteredData = (Main.data.teamData | filterByDateRange | filter: Main.tableConfig.generalSearch | orderBy: ['Date', 'Name']) | startFrom: Main.pagination.startAtIndex | limitTo: Main.pagination.pageSize"> 
    <td ng-repeat="column in Main.tableConfig.columnsConfig | selectColumnsByGranularity: Main.tableConfig.programGranularity"> 
     <span ng-if="!column.isDate" ng-bind="item[column.dataValue] | ifEmpty: 0"></span> 
     <span ng-if="column.isDate" ng-bind="item[column.dataValue] | date:'MM/dd/yyyy': 'UTC' | ifEmpty: 0"></span> 
    </td> 
</tr> 

<tr ng-if="Main.tableConfig.programGranularity == 'colleague'" ng-repeat="item in Main.pagination.filteredData = (Main.data.parsedData | filterByDateRange | filter: Main.tableConfig.generalSearch | orderBy: ['Date', 'Name']) | startFrom: Main.pagination.startAtIndex | limitTo: Main.pagination.pageSize"> 
    <td ng-repeat="column in Main.tableConfig.columnsConfig | selectColumnsByGranularity: Main.tableConfig.programGranularity"> 
     <span ng-if="!column.isDate" ng-bind="item[column.dataValue] | ifEmpty: 0"></span> 
     <span ng-if="column.isDate" ng-bind="item[column.dataValue] | date:'MM/dd/yyyy': 'UTC' | ifEmpty: 0"></span> 
    </td> 
</tr> 

我想同樣pagination.filteredData陣列由每個ngRepeat指令來設置。但是，只有運行的第一個ngRepeat會設置該值，而其他ngRepeat將不會再設置該值。

我試過ngInit並在其中初始化一個對象pagination，並引用我的ngRepeat。我也嘗試使用$parent.pagination.filteredData。

使用AngularJS V1.5.0

我如何得到這個工作？

與https://stackoverflow.com/questions/38235907/angularjs-service-variable-not-being-set-inside-of-ngrepeat類似，但重寫並有根本性的不同。儘管解決了同樣的問題。

編輯：重構爲利用controller as語法，問題仍然存在。對我來說，當我切換到不同的ngRepeat時，似乎創建了一個新的數組和引用，而不是覆蓋當前數組值。

Answer 1

好吧，我花了一些時間把demo replicating (as best I could) the code that you have provided< - 破，我想我理解你的問題。你說「運行的第一個ng-repeat設置了值」，我認爲它實際上是設置它的運行ng-repeat。它沒有設置價值的問題，問題是每次都運行3 ng重複，所以它總是最後一個獲勝。

之所以出現這種情況是因爲NG重複執行前 NG-如果爲<element ng-if="item.showMe" ng-repeat="item in Main.items"></element>

通常情況下如此說來，即使你的ng-if條件是假的，所以<tr>做沒有得到顯示，ng-repeat已經運行，並且已經設置了Main.pagination.filteredData

我認爲你最好的行動方式是將你的ng-if上一級到<tbody>。它看起來像下面這樣：

WORKING DEMO< - 工作

<table> 
    <thead> 
     <tr> 
     <th>Name</th> 
     <th>Data</th> 
     <th>Date</th> 
     </tr> 
    </thead> 
    <tbody ng-if="Main.tableConfig.programGranularity == 'overall'" > 
     <tr ng-repeat="item in Main.pagination.filteredData = (Main.data.overallData | filterByDateRange | orderBy: ['date', 'name']) | startFrom: Main.pagination.startAtIndex | limitTo: Main.pagination.pageSize"> 
     <td ng-bind="item.name"></td> 
     <td ng-bind="item.overall"></td> 
     <td ng-bind="item.date"></td> 
     </tr> 
    </tbody> 
    <tbody ng-if="Main.tableConfig.programGranularity == 'team'" > 
     <tr ng-repeat="item in Main.pagination.filteredData = (Main.data.teamData | filterByDateRange | orderBy: ['date', 'name']) | startFrom: Main.pagination.startAtIndex | limitTo: Main.pagination.pageSize"> 
     <td ng-bind="item.name"></td> 
     <td ng-bind="item.team"></td> 
     <td ng-bind="item.date"></td> 
     </tr> 
    </tbody> 
</table>