AngularJS ng-repeat 上的 orderBy 什么都不做

Question

我正在为我的学生制作一个小型演示 AngularJS 应用程序，但我运行因 orderBy 过滤器而陷入麻烦 ng-重复。我正在从 PHP 脚本中通过 AJAX 检索 JSON 数据。数据加载正常，只是顺序不起作用。

这是 HTML 页面中我关心的部分：

<div ng-controller="MemberListController">
    <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
    <hr/>
    <button ng-click="predicate=''">Set to unsorted</button>

    <table class="table">
        <thead>
            <tr>
                <th>
                    <button ng-click="order('gender')">Geslacht</button>
                    <span class="sortorder" ng-show="predicate === 'gender'" ng-class="{reverse:reverse}"></span>
                </th>
                <th>
                    <button ng-click="order('first_name')">Voornaam</button>
                    <span class="sortorder" ng-show="predicate === 'first_name'" ng-class="{reverse:reverse}"></span>
                </th>
                <th>
                    <button ng-click="order('last_name')">Achternaam</button>
                    <span class="sortorder" ng-show="predicate === 'last_name'" ng-class="{reverse:reverse}"></span>
                </th>
                <th>Geboren</th>
                <th>Lid sinds</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="member in members track by member.id | orderBy:predicate:reverse" ng-hide="member.deleted == 1">
                <td>{{ member.gender }}</td>
                <td>{{ member.first_name }}</td>
                <td>{{ member.last_name }}</td>
                <td>{{ member.birth_date | date:'dd-MMM-yyyy' }}</td>
                <td>{{ member.member_since | date:'dd-MMM-yyyy'  }}</td>
            </tr>
        </tbody>
    </table>
</div>

这是我的 Javascript 代码：

(function () 
{
    // init the module
    var app = angular.module('ledenjs', []);

    // define the memberlist controller
    app.controller('MemberListController', ['$scope', '$http', function ($scope, $http) 
    {
        // define and set the scope properties
        $scope.members = [];
        $scope.predicate = 'last_name';
        $scope.reverse = false;

        // define the order method
        $scope.order = function (predicate) 
        {
            $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
            $scope.predicate = predicate;
        };

        // read the members from the db
        $http.get('MY_URL_HERE')
        .success(function (response) 
        {
            console.log('Received ' + response.length + ' members.');
            $scope.members = response;
        })
        .error(function () 
        {
            alert('Could not retrieve members from server.');
        });
    }]);
})();

JSON 数据是由一个非常简单的脚本从示例 table:

生成的

$result = mysqli_query($mysqli, "SELECT * FROM ledenjs");
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
}
header("Content-Type: application/json");
echo json_encode($data);

返回数据的一部分：

[{"id":"10001","birth_date":"1953-09-02","first_name":"Georgi","last_name":"Facello","gender":"M","member_since":"1986-06-26","deleted":"0"},{"id":"10002","birth_date":"1964-06-02","first_name":"Bezalel","last_name":"Simmel","gender":"F","member_since":"1985-11-21","deleted":"0"},{"id":"10003","birth_date":"1959-12-03","first_name":"Parto","last_name":"Bamford","gender":"M","member_since":"1986-08-28","deleted":"0"},{"id":"10004","birth_date":"1954-05-01","first_name":"Chirstian","last_name":"Koblick","gender":"M","member_since":"1986-12-01","deleted":"0"}]

所以...我已经在 SO 上查看了有关此主题的问题，我查看了 OrderBy here 的 AngularJS 文档（如您所见，我的代码是基于那里的样本），但我的 table 仍然无法排序。

我知道 "orderBy won't work on objects, only on arrays" 回答了大部分问题，但我的数据看起来是一个数组，实际检索工作正常，我看到控制台日志行加载页面时正确的记录数。

这让我慢慢陷入困境...任何帮助将不胜感激。

马克.

已解决：感谢 Dmitriy Khudorozhkov 指出 "track by" 和 "orderBy" 往往会干扰。它确实有效，你把 "track by" 放在最后，在所有过滤器之后：

<tr ng-repeat="member in members | orderBy:predicate:reverse track by member.id">

Answer 1

<tr ng-repeat="member in members track by member.id | orderBy:predicate:reverse" ng-hide="member.deleted == 1">

- 此行在 1.2 版本之前的 AngularJS 中可能会中断；尝试删除

track by member.id

部分，看看它是否有效。

更新：Angular v.1.2 及更高版本的真正解决方案是：

ng-repeat="member in members | orderBy:predicate:reverse track by member.id"

- 跟踪 .

AngularJS ng-repeat 上的 orderBy 什么都不做

AngularJS orderBy on ng-repeat does nothing

json

sql-order-by

filter

angularjs

ng-repeat