我有一组图块,显示一定数量,具体取决于用户选择的选项。我现在想实现一个排序的任何数字显示。
下面的代码显示了我如何实现它(通过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"
另一件值得注意的是orderBy只是AngularJS filters的一个例子,所以如果你需要一个非常具体的排序行为,你可以编写自己的过滤器(虽然orderBy应该足够大多数用例)。