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

使用自定义Angular filter，您可以过滤您的ng-repeat，如下面的演示或此处的jsfiddle。

您可以使用lodash或下划线方法（例如forEach）代替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>

AngularJS自定义顺序和限制

2 个答案: