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>