Javascript AngularJs-从多个ngRepeat'；引用同一范围属性；s

我有多个

ngRepeats

生成表格内容，根据用户希望看到的视图，使用不同的

ngRepeat

生成表格。当用户切换他们的视图，并且从DOM中删除以下一项并添加另一项时，新的

ngRepeat

不会引用相同的

分页.filteredData

数组

示例：

Main

是我的控制器，使用

控制器作为

语法

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

我希望每个

ngRepeat

指令都设置相同的

pagination.filteredData

数组。但是，只有运行的第一个

ngRepeat

设置该值，其他

ngRepeat

将不会再次设置该值

我已经尝试了

ngInit

，并在其中初始化了一个带有

pagination

的对象，并在我的

ngRepeat

中引用了它。我还尝试过使用

$parent.pagination.filteredData

使用AngularJS v1.5.0

我怎样才能让它工作

与之相似，但经过改写，与之根本不同。解决同样的问题

---

编辑：经过重构以将

控制器用作
语法，问题仍然存在。在我看来，当我切换到另一个ngRepeat时，会创建一个新的数组和引用，而不是覆盖当前数组的值。
好的，我花了一些时间整理了一个我几乎每天都在angular标签中看到这个问题。您需要使用angular的“controller as”语法，这允许您明确在视图中使用的范围。下面是一篇我经常链接的精彩文章，它很好地解释了这一点：您是否尝试过
ng init=“pagination.startAtIndex=0”
？您可以通过注入
$filter
在控制器中手动筛选数据，在服务属性上设置结果，然后让ng repeat在预筛选的结果上迭代。@AlonEitan正确引用
startAtIndex
和
pageSize
，并在所有ng repeat之间工作。然而，我这样做是为了踢，它并没有改变我有问题的行为。@mhodges Woops，我只是复制/粘贴了错误的HTML块。那是我在测试，如果只是将一个对象粘贴到我的
Main
类中，其行为是否会有所不同。这是一个非常好的观察，谢谢！您是否找到了有关此行为的文档，或者自己解决了它？我可能从来没有想过。经过一番思考后，您认为最后一次ng重复设置是正确的。假设它们按照标记中的顺序运行，最后一个（同事）就是筛选数组始终设置的值。@DouglasGaskell不客气！老实说，创建演示以隔离行为并显示Main.pagination.Filteredata的值确实有帮助。我可以看到它总是被设置为最后一个列表，当我试图找出原因时，我记得ng repeat在ng if之前运行，因为我一直在使用该功能。最合乎逻辑的解决方案就是将它向上移动到，这样，如果ng if为false，ng repeat就不会运行，问题就解决了@道格拉斯·盖斯凯尔同样，我很高兴你重构后使用了“控制器作为”。尽管这不是你问题的直接解决办法，但我认为从长远来看，这将是有帮助的。遗憾的是，更多的人不知道它，因为它确实是在视图中实现控制器的最佳方法（出于本文列出的各种原因）。我同意，“控制器作为”在HTML中引用嵌套控制器时更符合逻辑。你肯定会避开地狱。如果我计划将来迁移到Angular 2，这也是必要的。
<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>