Angular.js：ng-repeat OrderBy 无法对值进行排序

Question

我正在使用 Angular.JS 从服务器传递的对象数组中检索数据。每个对象都有一个 ID、一个名称和一个位置标识符，用于在 table.

中对对象进行排序

但是，orderBy 不起作用：这里是一个显示位置的示例输出。

这里是list.js的代码：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

});

和 JADE 页面：

doctype html
html
    head
        title  Angular.js Test Page
        link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')
        script(src='/javascripts/angular.min.js')
        script(src='/javascripts/list.js')

    body(ng-app='myApp', ng-controller='myCtrl' ng-init='list= #{JSON.stringify(list)}')

        .col-lg-3
            table.table.table-bordered
                thead
                    tr
                        th User List
                tfoot(ng-repeat="item in list | orderBy: 'position' track by item.position")
                    tr
                        td {{item.position}}

这是通过的列表：

 "list": [
    {
        "position": 5,
        "name": "Item 1",
        "id": 205690
    },
    {
        "position": 9,
        "name": "Item 2",
        "id": 15540
    },
    {
        "position": 12,
        "name": "Item 3",
        "id": 360640
    },
    {
        "position": 27,
        "name": "Item 4",
        "id": 325470
    },
    {
        "position": 7,
        "name": "Item 5",
        "id": 271670
    },
    {
        "id": 72850,
        "name": "Item 6",
        "position": 9196
    },
    {
        "id": 15080,
        "name": "Item 7",
        "position": 6863
    },
    {
        "id": 242550,
        "name": "Item 8",
        "position": 6864
    },
    {
        "id": 207490,
        "name": "Item 9",
        "position": 6865
    },
    {
        "id": 15060,
        "name": "Item 10",
        "position": 6862
    }
]

根据我检查的所有来源，ng-repeat 语法是正确的。

如果我通过 id 跟踪或删除跟踪，结果是一样的；如果我使用 OrderBy: '-position'，位置 9196 将放在底部（'5' 之后）。

Firefox 控制台完全没有显示任何警告或错误！

一切似乎都很好，所以我对发生的事情感到困惑。有人可以帮忙吗？

谢谢。

Answer 1

您是否尝试过使用 tbody 而不是 tfoot？

<div ng-app="myApp" ng-controller="myCtrl">
    <table>
        <thead>
            <tr><td></td></tr>
        </thead>
        <tbody>
              <tr ng-repeat="item in list | orderBy:'position' track by item.position">
            <td>{{item.position}}</td></tr>
        </tbody>
    </table>
</div>

我在 JSFiddle 中做到了并且有效...

Answer 2

也许问题出在您的 angular 版本上。

我的代码在 angularjs 1.2.1 上运行完美，在 angularjs 1.0.3 上运行不正常。自己看看这个 fiddle

 <div ng-app>
   <div ng-controller="ClickToEditCtrl">
   <ul>
    <li ng-repeat="item in test track by item.id">
        {{item.name}}
    </li>
   </ul>
 </div>
</div>    


$scope.list = [
{
    "position": 5,
    "name": "Item 1",
    "id": 205690
},
{
    "position": 9,
    "name": "Item 2",
    "id": 15540
},
{
    "position": 12,
    "name": "Item 3",
    "id": 360640
},
{
    "position": 27,
    "name": "Item 4",
    "id": 325470
}
];

http://jsfiddle.net/Miqe/wqgkst7d/1/

Angular.js：ng-repeat OrderBy 无法对值进行排序

Angular.js : ng-repeat OrderBy fails to order values

javascript

angularjs

pug