angularjs – ng-repeat中的自定义排序功能

前端之家收集整理的这篇文章主要介绍了angularjs – ng-repeat中的自定义排序功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一组图块,显示一定数量,具体取决于用户选择的选项。我现在想实现一个排序的任何数字显示

下面的代码显示了我如何实现它(通过gettting /在父卡范围内设置一个值)。现在,因为orderBy函数接受一个字符串,我试图在卡范围内设置一个变量称为curOptionValue并排序,但它似乎并不工作。

所以问题变成了,如何创建自定义排序函数

<div ng-controller="aggViewport" >
<div class="btn-group" >
    <button ng-click="setOption(opt.name)" ng-repeat="opt in optList" class="btn active">{{opt.name}}</button>
</div>
<div id="container" iso-grid width="500px" height="500px">
    <div ng-repeat="card in cards" class="item {{card.class}}" ng-controller="aggCardController">
        <table width="100%">
            <tr>
                <td align="center">
                    <h4>{{card.name}}</h4>
                </td>
            </tr>
            <tr>
                <td align="center"><h2>{{getOption()}}</h2></td>
            </tr>
        </table>        
    </div>
</div>

和控制器:

module.controller('aggViewport',['$scope','$location',function($scope,$location) {
    $scope.cards = [
        {name: card1,values: {opt1: 9,opt2: 10}},{name: card1,opt2: 10}}
    ];

    $scope.option = "opt1";

    $scope.setOption = function(val){
        $scope.option = val;
    }

}]);

module.controller('aggCardController',function($scope){
    $scope.getOption = function(){
        return $scope.card.values[$scope.option];
    }
}]);
实际上,orderBy过滤器可以作为参数不仅是一个字符串,而且一个函数。从orderBy文档: http://docs.angularjs.org/api/ng.filter:orderBy):

function: Getter function. The result of this function will be sorted
using the <,=,> operator.

所以,你可以编写自己的函数。例如,如果你想比较基于opt1和opt2的总和(我在做这个,你的意思是你可以有任何任意函数)你会写在你的控制器卡:

$scope.myValueFunction = function(card) {
   return card.values.opt1 + card.values.opt2;
};

然后,在您的模板:

ng-repeat="card in cards | orderBy:myValueFunction"

Here is the working jsFiddle

另一件值得注意的是orderBy只是AngularJS filters的一个例子,所以如果你需要一个非常具体的排序行为,你可以编写自己的过滤器(虽然orderBy应该足够大多数用例)。

猜你在找的Angularjs相关文章