AngularJs的动态顺序表达式
AngularJs dynamic orderBy expression
代码如下:我嵌套了ng-repeat和一个包含所有其他字段之和的字段。
<div class="animate margin-top" >
<div layout="row" layout-align="center" ng-repeat="data in leaderBoardData | orderBy: 'getTotal($index)'" style = "padding: 10px;" class= "md-padding">
<section class="text-center width-20"><a>{{data.handleName}}</a></section>
<section class="text-center width-20" ng-repeat="score in data.score track by $index">{{score}}</section>
<section class="text-center width-20">{{getTotal($index)}}</section>
</div>
</div>
所以我要根据动态域getTotal($index)
进行排序。我该怎么做呢?
getTotal()
函数
的代码$scope.getTotal = function (index) {
var total = 0
$scope.leaderBoardData[index].score.forEach(function (score) {
total = total + score
})
return total
}
下面是leaderboardData
var leaderBoardData = [ { handleName: 'xyz', score: [1,2,3] },{ handleName: 'acc', score: [4,5,6] } ]
-
去掉order表达式的引号,这样angular就知道它是一个函数,你不需要显式地传递$index作为参数。
-
您需要将此
{{getTotal($index)}}
更改为{{getTotal(data)}}
,因为数据已经在这里迭代。
所以,基本上:
function Ctrl($scope) {
$scope.leaderBoardData = [{
handleName: 'xyz',
score: [4, 5, 6]
}, {
handleName: 'acc',
score: [1, 2, 3]
}, {
handleName: 'acFc',
score: [1, 2, 4]
}];
$scope.getTotal = function(index) {
var total = 0;
// also change to index as array already passed to function
index.score.forEach(function(score) {
total = total + score;
})
return total;
};
}
<!DOCTYPE html>
<html ng-app>
<head></head>
<body>
<div>
<div ng-controller="Ctrl" class="animate margin-top">
<div layout="row" layout-align="center" ng-repeat="data in leaderBoardData | orderBy: getTotal" style="padding: 10px;" class="md-padding">
<section class="text-center width-20">
<a>{{data.handleName}}</a>
</section>
<section class="text-center width-20" ng-repeat="score in data.score track by $index">{{score}}</section>
<section class="text-center width-20">
<!-- change is here -->
{{getTotal(data)}}
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
我猜$scope。leaderBoardData不是一个数组(它是一个对象的对象),orderBy过滤器只适用于数组。如果你赚了$scope。leaderBoardData是一个数组,它将工作
我猜你没有正确使用forEach
$scope.getTotal = function (index) {
var total = 0;
angular.forEach($scope.leaderBoardData,function(score,index){
total = total + score
})
return total;
}
你可以这样做。HTML
<div layout="row" layout-align="center" ng-repeat="data in leaderBoardData | orderBy: 'totalScore'" style = "padding: 10px;" class= "md-padding">
<section class="text-center width-20"><a>{{data.handleName}}</a></section>
<section class="text-center width-20" ng-repeat="score in data.score track by $index">{{score}}</section>
<section class="text-center width-20">total score={{data.totalScore}}</section>
</div>
JS:
$scope.leaderBoardData = [ { handleName: 'xyz', score: [111,21,3] },{ handleName: 'acc', score: [14,5,16] } ];
$scope.leaderBoardData.forEach(function(oneRecord,key){
var total=0;
oneRecord.score.forEach(function(oneEle,key){
total = total + oneEle
})
oneRecord.totalScore = total;
})
相关文章:
- 正则表达式 - 不要介意顺序
- XPath 表达式,用于按源顺序选择 *所有* 元素、文本节点和注释节点
- 正则表达式,任何术语可选且顺序(javascript 或 java)
- 如何以没有特定顺序编写正则表达式
- 按顺序匹配正则表达式模式
- 当我简单地改变两个表达式的顺序时,为什么这个for循环不能工作?
- Javascript正则表达式:匹配任意顺序的2个子字符串
- 用正则表达式替换行中的N个字符串,其中N个字符串可以在行中的任意顺序
- 为什么表达式new Date(). gettime()中的运算符严格按照从左到右的顺序应用?
- 正则表达式用于按字母顺序排列的文本,但有一些例外
- 由多个单词(任意顺序)组成的不重复的正则表达式
- 用于验证键盘顺序的正则表达式
- AngularJs的动态顺序表达式
- jQuery正则表达式反向顺序
- 正则表达式以任意顺序匹配可选标记
- JavaScript - 以任何顺序匹配的正则表达式
- 正则表达式,以任意顺序匹配至少两个特殊字符
- if语句中表达式的顺序
- Javascript赋值表达式的执行顺序
- 正则表达式.20按字母顺序排列,最多2个.- _)