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

Question

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

下面的代码显示了我如何实现它(通过获取/设置父卡范围中的值)。现在，因为 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>

和 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];
    }
}]);

Answer 1

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

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

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

$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 对于大多数用例来说应该足够了)。