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

【问题标题】：Angular.js : ng-repeat OrderBy fails to order valuesAngular.js：ng-repeat OrderBy 无法对值进行排序
【发布时间】：2016-01-17 15:06:56
【问题描述】：

我正在使用 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 控制台根本没有显示警告或错误！

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

谢谢。

【问题讨论】：

它对我有用，jsfiddle.net/wu395o9k
奇怪——你的例子在 jsfiddle 上运行良好。我删除了控制器，并下载了最新的 angular.js 版本，禁用了 css 但仍然没有变化。会不会是桌子有问题？
你能试试 orderBy: position track by item.position 吗？没有单引号的含义
我这样做了，但没有工作。

标签： javascript angularjs pug

【解决方案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 中完成了它，它有效...

【讨论】：

谢谢！我很好奇它为什么会这样，但我想这超出了问题的范围......
可能是因为页脚必须位于表格的最后一行。因此，当您按位置排序时，第一个元素将作为页脚，另一个作为表格主体。

【解决方案2】：

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

我的代码在 angularjs 1.2.1 上运行完美，而在 angularjs 1.0.3 上不运行。在这个小提琴上自己看看吧

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

【讨论】：