Question

我正在为我的学生制作一个小型演示AngularJS应用程序，但是我在 ng-repeat 上使用 orderBy 过滤器时遇到了麻烦。我正在从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数据由示例表中非常简单的脚本生成：

$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"}]

所以...我已经在这里查看了关于这个主题的问题，我已经查看了OrderBy here的AngularJS文档（正如您所看到的，我的代码基于那里的样品），但我的桌子仍然没有排序。

我知道大多数这些问题都是通过＆＃34; orderBy不能在对象上工作，只在数组＆＃34;上工作，但是我的数据是它的外观和实际检索的数组工作正常，我在加载页面时看到控制台日志行的记录数正确。

这慢慢地把我推上了墙......任何帮助都会非常感激。

标记。

已解决：感谢Dmitriy Khudorozhkov指出＆＃34;跟踪＆＃34;和＆＃34; orderBy＆＃34;倾向于干涉。它确实有用，你可以通过＆＃34;最后，在所有过滤器之后：

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

- 跟踪should come after orderBy clause。

AngularJS orderBy on ng-repeat什么也没做

1 个答案: