AngularJS多ng-repeat嵌套表格如何同时对两数组按indicate排序

你的问题核心在于：当前代码仅对first数组做了排序，但second数组是通过原数组的$index来取值的——当first排序后，$index对应的是排序后的位置，而非second数组原本的索引，所以second的元素无法跟着同步排序。下面给你两种可行的解决方案：

方案一：控制器中先分别排序再配对（推荐） #

在控制器里先对两个数组单独按indicate排序，再将它们配对成一个新数组，这样视图只需循环这个配对后的数组，就能保证两者排序完全一致，同时性能更优。

1. 控制器代码修改：

// 复制原数组避免修改原始数据，按indicate字段排序
const sortedFirst = [...vm.result[0].first].sort((a, b) => {
  return a.indicate.localeCompare(b.indicate);
});
const sortedSecond = [...vm.result[1].second].sort((a, b) => {
  return a.indicate.localeCompare(b.indicate);
});

// 将排序后的两个数组合并为配对数据
vm.pairedData = sortedFirst.map((masterItem, index) => ({
  master: masterItem,
  editable: sortedSecond[index]
}));

2. 表格视图修改：

<table class="table" >
  <thead>
    <tr>
      <th ng-show="column">Key</th>
      <th>Master</th>
      <th>Editable</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in vm.pairedData | filter: searchfield track by $index">
      <td>{{item.master.indicate}}</td>
      <td>{{item.master.text}}</td>
      <td>{{item.editable.indicate}}</td>
      <td>{{item.editable.text}}</td>
    </tr>
  </tbody>
</table>

方案二：视图中直接对两个数组应用排序（适合简单场景） #

如果不想修改控制器，也可以在视图中同时对first和second数组应用orderBy过滤器，调整循环逻辑即可：

<table class="table" >
  <thead>
    <tr>
      <th ng-show="column">Key</th>
      <th>Master</th>
      <th>Editable</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="(idx, ed) in vm.result[0].first | filter: searchfield | orderBy: 'indicate' track by $index">
      <!-- 从排序后的second数组中取对应索引的元素 -->
      <td>{{ed.indicate}}</td>
      <td>{{ed.text}}</td>
      <td>{{ (vm.result[1].second | orderBy: 'indicate')[idx].indicate }}</td>
      <td>{{ (vm.result[1].second | orderBy: 'indicate')[idx].text }}</td>
    </tr>
  </tbody>
</table>

不过这个方案每次循环都会重新执行orderBy过滤器，数据量大时性能会受影响，优先推荐方案一。

补充：原代码失效的原因 #

你原来的vm.result[1].second[$index]是直接从未排序的原数组中取元素，而first数组经过orderBy后，$index是排序后的位置，和原second数组的索引已经不匹配，所以导致second的元素无法同步排序。

内容的提问来源于stack exchange，提问作者Em.C