There is an array of objects from which I get data to put in the table:
$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"]}
];
Putting the data in the table is working fine, the problem comes when I want to add the sorting functionality by columns.
In controller's constructor I added this:
this.orderByField = 'name';
this.reverseSort = false;
firstly I tried to add the sorting functionality only for the name
column and this is the code:
<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>
This is the error message:
[orderBy:notarray] Expected array but received: 0
Don't know why the array is 0. Any ideas?
So, the issue is related to track by $index
. You have misplaced it.
I have made the plunker for it. Below is the link:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.