Question

到ng-repeat我想根据id号码（从1到5）以定义的顺序绘制视频。

<div ng-app="myApp" ng-controller="Ctrl">
    <div ng-repeat="vidObj in videoObjects | orderBy: 'id'">
        <span>{{vidObj.id}}</span>  
    </div>
</div>

我尝试应用过滤器orderBy，但显然无法正常工作。你知道我做错了什么吗？这是一个带有完整代码的JSfiddle。

提前感谢您的回复！

编辑：感谢您的回复，但json文件无法更改。

Answer 1

我修改了你的Json并且它可以正常工作

angular.module('myApp', [])
    .controller('Ctrl', function($scope) {
        $scope.videoObjects = [
        {
            "name": "Frank",
          "id": "1"
        },
        {
            "name": "Gerard",
          "id": "2"
        },
        {
          "name": "Rein",
          "id": "3"
        },
        {
            "name": "Ida",
          "id": "4"
        },
        {
          "name": "Ellen",
          "id": "5"
        }
      ]
    });

Answer 2

我认为内置的orderBy过滤器适用于数组。

documentation表示“集合可以是数组或类似数组的对象（例如NodeList，jQuery对象，TypedArray，String等）。”

请在“使用ngRepeat订购表格的示例”文档中查看此示例。

Answer 3

Javascript：

angular.module('myApp', [])
    .controller('Ctrl', function($scope) {
        $scope.videoObjects = {
        "Frank": {
          "id": 1
        },
        "Gerard": {
          "id": 2
        },
        "Rein": {
          "id": 3
        },
        "Ida": {
          "id": 4
        },
        "Ellen": {
          "id": 5
        }
      };

 $scope.arr = Object.keys($scope.videoObjects).map(function(k) { return $scope.videoObjects[k] });
console.log($scope.arr);

    });

和HTML

<div ng-app="myApp" ng-controller="Ctrl">
    <div ng-repeat="vidObj in arr | orderBy: 'id'">
        <span>{{vidObj.id}}</span>  
    </div>
</div>

我用这段代码更新了你的小提琴..它运作良好。

以下是链接http://jsfiddle.net/tirthrajbarot/fc16op6u/39/

Answer 4

尝试有效的json，例如：

angular.module('myApp', [])
    .controller('Ctrl', function($scope) {
        $scope.videoObjects = [
         {
          "id": 1,
          "Frank":'name'
        },
         {
          "id": 2,
          "Gerard":'name'
        }
      ];

    });

working fiddle

ng-repeat orderBy问题

4 个答案: