按自定义列表对ng-repeat标签进行排序?

时间:2017-07-05 13:27:14

标签: angularjs angularjs-ng-repeat angularjs-filter angularjs-orderby

我的ng-repeat显示大数据,在groupBy之后它分为5个div

<div ng-repeat=" (key, value) in gamesList | groupBy: 'id' ">...</div>

ID值为

{ '1' , '2' , '3' , '4' , '5' } 

结果它从最小到最大订单

如何使用我的自定义规则进行订购,如下所示:

{'5' , '2' , '4' , '1' , '3' }

1 个答案:

答案 0 :(得分:1)

您可以使用sort()功能对数据进行排序,而不是使用过滤器。 你必须像这样定义你的规则:

var myRule = {'5':1,'2':2,'4':3,'1':4,'3':5}

然后您必须对数据应用自定义规则。

scope.gameList=scope.gameList.sort(function(a,b){
  return myRule[a.id]>myRule[b.id];
});

您可以使用自定义过滤器执行此操作,如下所示:

myApp.filter('myFilter', function() {
 return function(input) {
   var output;
   var myRule = {'5':1,'2':2,'4':3,'1':4,'3':5};

   output = input.sort(function(a, b) {  
    return myRule[a.id]>myRule[b.id];
   });

   return output;
  }
});

您可以像这样应用自定义过滤器:

<div ng-repeat="d in data | myFilter">

Here是关于plunker的一个例子。 希望这会对你有所帮助!