在NG-重复定义排序功能 [英] Custom sort function in ng-repeat

问题描述

我有一组显示，这取决于选项由用户选择的一定数量的瓷砖。我现在想实现一个排序无论是显示号码。

在code以下显示了我如何实现它（通过流汗/设置父卡范围的值）。现在，因为排序依据功能需要一个字符串，我试图设置在名为curOptionValue和排序由该卡作用域的变量，但它似乎并没有工作。

于是问题就变成了如何创建自定义排序函数？

 ＆LT; D​​IV NG控制器=aggViewport＆GT;
＆LT; D​​IV CLASS =BTN-组＆GT;
    ＆LT;按钮NG点击=的SetOption（opt.name）NG重复=选择在optList级=BTN活跃＆GT; {{opt.name}}＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆所述;格ID =容器异网格宽度=500px的高度=500px的＆GT;
    ＆LT; D​​IV NG重复=牌牌级=项{{card.class}}NG控制器=aggCardController＆GT;
        ＆LT;表格的宽度=100％＆GT;
            ＆所述; TR＆GT;
                ＆LT; TD ALIGN =中心＆GT;
                    ＆LT; H4＆GT; {{card.name}}＆LT; / H4＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
            ＆所述; TR＆GT;
                ＆所述; TD对齐=中心＆GT;＆下; H2＆GT; {{getOption（）}}＆下; / H2＆GT;＆下; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; /表＆gt;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

和控制器：

  module.controller（'aggViewport'，['$范围，$位置'，函数（$范围，$位置）{
    $ scope.cards = [
        {名：卡1，值：{OPT1：9，OPT2：10}}，
        {名：卡1，值：{OPT1：9，OPT2：10}}
    ];    $ scope.option =OPT1;    $ scope.setOption =功能（VAL）{
        $ scope.option = VAL;
    }}]）;module.controller（'aggCardController'，['$范围'，函数（$范围）{
    $ scope.getOption =功能（）{
        返回$ scope.card.values​​ [$ scope.option];
    }
}]）;
 

解决方案

其实，排序依据过滤器可以作为参数不仅是一个字符串，但也是一个函数。从排序依据文件：<一href=\"http://docs.angularjs.org/api/ng.filter:orderBy\">http://docs.angularjs.org/api/ng.filter:orderBy):

  

功能：getter函数。此函数的结果进行排序
  使用在＆lt;，=，>操作符。

所以，你可以写自己的函数。例如，如果您想根据OPT1和OPT2的总和来比较卡（我做这件事，问题是，你可以有任意的功能），你会在你的控制器写：

  $ scope.myValueFunction =功能（卡）{
   返回card.values​​.opt1 + card.values​​.opt2;
};
 

然后，在你的模板：

  NG-重复=牌卡|排序依据：myValueFunction
 

这里是工作的jsfiddle

值得一提的另一件事是，排序依据终止的 AngularJS过滤器，如果你需要一个非常具体的订货行为，你可以写自己的过滤器（虽然排序依据应该足以满足大多数用例）

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: http://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-重复定义排序功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！