agularjs自定义订单和限制

Question

我已经列出了一些项目，需要按优先级将它们整理成列表。

items = [ 
    {'type': 2, 'priority': 1, 'name': 'one'}, 
    {'type': 1, 'priority': 2, 'name': 'two'}, 
    {'type': 1, 'priority': 3, 'name': 'three'}, 
    {'type': 1, 'priority': 4, 'name': 'four'}, 
    {'type': 1, 'priority': 5, 'name': 'five'}, 
    {'type': 2, 'priority': 6, 'name': 'six'}, 
] 

而我需要按ng-repeat按优先级排序，并按类型分开。在一个列表type值的最大总和应为4。所以输出应该像（由name）

['one', 'two', 'three', 'four'] 
['five', 'six'] 

Answer 1

随着Underscorejs你可以尝试：

var newItems = _.chain(items).sortBy('priority').groupBy('type').value(); 

终于可以巡回的新数组以ng-repeat表示。

编辑：这里是的jsfiddle：http://jsfiddle.net/wb5d5pfs/

Answer 2

通过自定义角filter你可以过滤你的NG-重复像下面或在这里jsfiddle演示。

而不是forEach循环，您也可以使用lodash或下划线方法（例如groupBy('type'）。

使用角度过滤器，您也可以像这样在jsfiddle中执行此操作，而且不需要自定义过滤器。

angular.module('demoApp', []) 
 
    .filter('filterByType', TypeFilter) 
 
    .value('MAX_ITEMS', 4) 
 
    .controller('mainController', MainController); 
 

 
function TypeFilter($filter, MAX_ITEMS) { 
 
    return function(input, selectedType) { 
 
     var out = [], count=0, 
 
      ordered = $filter('orderBy')(input, 'priority'); 
 
     //console.log("filter start", ordered); 
 
     
 
     angular.forEach(ordered, function(obj, index) { 
 
      if (obj.type == selectedType.type && 
 
       count < MAX_ITEMS) { 
 
       out.push(obj); 
 
       count++; 
 
      } 
 
     }); 
 
     //console.log(out); 
 
     return out; 
 
    } 
 
} 
 

 
TypeFilter.$inject = ['$filter', 'MAX_ITEMS']; 
 

 
function MainController() { 
 
    
 
    this.filterTypes = [ 
 
      {type: 1}, 
 
      {type: 2} 
 
     ]; 
 
    this.type = this.filterTypes[0]; 
 
    this.items = [ 
 
     {'type': 2, 'priority': 1, 'name': 'one'}, 
 
     {'type': 1, 'priority': 2, 'name': 'two'}, 
 
     {'type': 1, 'priority': 3, 'name': 'three'}, 
 
     {'type': 1, 'priority': 4, 'name': 'four'}, 
 
     {'type': 1, 'priority': 5, 'name': 'five'}, 
 
     {'type': 2, 'priority': 6, 'name': 'six'}, 
 
    ]; 
 
     
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController as ctrl"> 
 
    Filter by type: 
 
    <select ng-model="ctrl.type" ng-options="opt.type for opt in ctrl.filterTypes"></select> 
 
    <p>selected type: {{ctrl.type.type}}</p> 
 
    <ul> 
 
     <li ng-repeat="item in ctrl.items |filterByType:ctrl.type"> 
 
      {{item.name}} 
 
     </li> 
 
    </ul> 
 
</div>