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

发布时间：2020-12-17 09:11:57 所属栏目：安全来源：网络整理

导读：我有一组图块，显示一定数量，具体取决于用户选择的选项。我现在想实现一个排序的任何数字显示。下面的代码显示了我如何实现它(通过gettting /在父卡范围内设置一个值)。现在，因为orderBy函数接受一个字符串，我试图在卡范围内设置一个变量称为curOptionVa

我有一组图块，显示一定数量，具体取决于用户选择的选项。我现在想实现一个排序的任何数字显示。

下面的代码显示了我如何实现它(通过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应该足够大多数用例)。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!