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中完成了它并且有效......

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

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

2 个答案: