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

Question

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

但是，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 中做到的它有效...