在AngularJS中按列標題對表進行排序

Question

有一個對象數組，我可以從中獲取要放入表中的數據：

$ctrl.myArray = [
            {name: "name1", id: 1, children: ["one", "two"]},
            {name: "name2", id: 2, children: ["two"]},
            {name: "name3", id: 3, children: ["one", "two"]},
            {name: "name4", id: 4, children: ["one"]}
];

將數據放在表中工作正常，當我想按列添加排序功能時，就會出現問題。

在控制器的構造函數中，我添加了以下內容：

this.orderByField = 'name';
this.reverseSort = false;

首先，我嘗試僅為name列添加排序功能，這是代碼：

<thead>
    <tr>
      <th>
        <a href="#" ng-click="orderByField='name'; reverseSort = !reverseSort">
            Name <span ng-show="orderByField == 'name'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
            </a>
      </th>
      <th>Id</th>
      <th>Children</th>
    </tr>
</thead>

<tbody>
    <tr ng-repeat="rows in $ctrl.myArray track by $index | orderBy:orderByField:reverseSort">
        <td>
            {{$ctrl.myArray[$index].name}}
        </td>
        <td>{{$ctrl.myArray[$index].id}}</td>
        <td><span ng-repeat="rows in $ctrl.myArray[$index].children track by $index">
            {{$ctrl.myArray[$parent.$index].children[$index]}}</span>
        </td>
    </tr>
</tbody>

這是錯誤消息：

[orderBy：notarray]預期的數組，但收到：0

不知道為什么數組為0。有什么想法嗎？

Answer 1

因此，問題與track by $index有關。 您放錯了位置。

我為此做了點小事。 以下是鏈接：

https://plnkr.co/edit/mqA1ofIRUAxal8d8tCr0?p=preview