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