AngularJs - Ссылка на то же свойство scope из нескольких ngRepeat's

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< - Broken, и я думаю, что я понимаю ваш вопрос. Вы говорите, что «первый ng-repeat, который запускает, устанавливает значение», и я думаю, что на самом деле это работает LAST ng-repeat, который устанавливает его. У него нет проблем с настройкой значения, проблема в том, что все 3 нг-повторы запускаются каждый раз, поэтому он всегда является последним, который выигрывает.

Причина это происходит потому, что нг-повтор выполняет ДО нг-если для общего случая <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< - Working

<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>