ng-repeat orderBy - 将值显示为值显示在数组中

时间:2016-03-22 11:36:31

标签: javascript angularjs

在我的指令中,我通过范围接收一个未排序的值数组,我希望将其与ng-repeat一起排序。原因是排序没有特殊的标准,我只想确保按照我想要的顺序显示一些标签,所以通过indexOf和splice在链接函数中进行手工排序看起来并不是很好。

我想知道是否按照我希望显示标签的顺序创建一个新数组可以在ng-repeat中以某种方式应用。

一个例子可能有助于理解我的观点。

我的指示

$scope.unsortedLabels // ['foo1', 'foo2', 'foo3'] Array of labels I receive from parent directive $scope.desiredLabelsOrder = ['foo3', 'foo1', 'foo2'] // The order I want the labels displayed

我的模板

<li ng-repeat="label in unsortedLabels | orderBy: ?? ></li>"

如何使用desiredLabelsOrder数组首先显示foo3标签,然后再显示foo1和foo2?

谢谢

1 个答案:

答案 0 :(得分:1)

条件很奇怪,但你可以通过制作自定义滤镜来确定角度设计。

Working Fiddle

angular.module('myApp',[]).filter('myFilter', function(){
    return function(items, newArrangement){
        console.log(newArrangement)
        var arrayToReturn = [];
        newArrangement.forEach(function(item,index){
            arrayToReturn[newArrangement[item-1]] = items[index];
        })

        console.log(arrayToReturn)
        return arrayToReturn;
    };
});

并在ng-repeat中使用它,您只需定义新的安排,如

<li ng-repeat="label in unsortedLabels | myFilter: [3,1,2] ></li>

<强>输出

foo3

foo1

foo2的

希望它有所帮助。