ng-repeat 中的自定义排序功能 [英] Custom sort function in ng-repeat

问题描述

我有一组图块，根据用户选择的选项显示特定数字.我现在想按显示的任何数字实现排序.

下面的代码显示了我是如何实现它的(通过在父卡片范围中获取/设置一个值).现在，因为 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 id="container" iso-grid width="500px" height="500px"><div ng-repeat="card in card" class="item {{card.class}}" ng-controller="aggCardController"><表格宽度="100%"><tr><td align="center"><h4>{{card.name}}</h4></td></tr><tr><td align="center"><h2>{{getOption()}}</h2></td></tr>

和控制器:

module.controller('aggViewport',['$scope','$location',function($scope,$location) {$scope.cards = [{名称:card1，值:{opt1:9，opt2:10}}，{名称:card1，值:{opt1:9，opt2:10}}];$scope.option = "opt1";$scope.setOption = function(val){$scope.option = val;}}]);module.controller('aggCardController',['$scope',function($scope){$scope.getOption = function(){返回 $scope.card.values[$scope.option];}}]);

解决方案

实际上 orderBy 过滤器不仅可以将字符串作为参数，还可以将函数作为参数.来自 orderBy 文档:https://docs.angularjs.org/api/ng/filter/orderBy):

<块引用>

function:获取函数.此函数的结果将被排序使用 <, =, > 运算符.

所以，你可以编写自己的函数.例如，如果您想根据 opt1 和 opt2 的总和来比较卡片(我正在编造，重点是您可以拥有任意函数)，您可以在控制器中编写:

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

然后，在您的模板中:

ng-repeat="卡片中的卡片 | orderBy:myValueFunction"

这是正在运行的 jsFiddle

另一件值得注意的事情是 orderBy 只是 AngularJS 过滤器 所以如果你需要一个非常具体的排序行为，你可以编写自己的过滤器(尽管 orderBy 对于大多数用例应该足够了).

I have a set of tiles that display a certain number depending on which option is selected by the user. I would now like to implement a sort by whatever number is shown.

The code below shows how I've implemented it (by gettting/setting a value in the parent cards scope). Now, because the orderBy function takes a string, I tried to set a variable in the card scope called curOptionValue and sort by that, but it doesn't seem to work.

So the question becomes, how to I create a custom sort function?

<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>

and controller :

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

    $scope.option = "opt1";

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

}]);

module.controller('aggCardController',['$scope',function($scope){
    $scope.getOption = function(){
        return $scope.card.values[$scope.option];
    }
}]);

解决方案

Actually the orderBy filter can take as a parameter not only a string but also a function. From the orderBy documentation: https://docs.angularjs.org/api/ng/filter/orderBy):

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

So, you could write your own function. For example, if you would like to compare cards based on a sum of opt1 and opt2 (I'm making this up, the point is that you can have any arbitrary function) you would write in your controller:

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

and then, in your template:

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

Here is the working jsFiddle

The other thing worth noting is that orderBy is just one example of AngularJS filters so if you need a very specific ordering behaviour you could write your own filter (although orderBy should be enough for most uses cases).

这篇关于ng-repeat 中的自定义排序功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！