我有一组显示一定数量的磁贴,具体取决于用户选择的选项。我现在想通过显示的任何数字来实现排序。
下面的代码显示了我是如何实现的(通过在父卡范围内获取/设置一个值)。现在,由于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, 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]; } }]);
实际上,orderBy过滤器不仅可以将字符串作为参数,还可以将函数作为参数。从orderBy文档中:https : //docs.angularjs.org/api/ng/filter/orderBy):
orderBy
函数:吸气功能。该函数的结果将使用<,=,>运算符进行排序。
因此,您可以编写自己的函数。例如,如果您想基于opt1和opt2之和来比较卡(我正在做这个,关键是您可以具有任意函数),则可以在控制器中编写:
$scope.myValueFunction = function(card) { return card.values.opt1 + card.values.opt2; };
然后,在您的模板中:
ng-repeat="card in cards | orderBy:myValueFunction"
这是工作的jsFiddle
另一个值得注意的是,这orderBy只是AngularJS过滤器的一个示例,因此,如果您需要非常特定的排序行为,则可以编写自己的过滤器(尽管orderBy对于大多数用例来说已经足够了)。