AngularJS-自定义过滤器 ng-repeat 求和
Posted 秋水_cnblogs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS-自定义过滤器 ng-repeat 求和相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="zh_CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Angular基础-自定义过滤器</title> 6 </head> 7 <body> 8 <div ng-app="myApp"> 9 <div ng-controller="myCtrl"> 10 <h2>ng-repeat 求和</h2> 11 <table border="1" width="400"> 12 <th> 13 <td>姓名</td> 14 <td>年龄</td> 15 <td>身高</td> 16 </th> 17 <tr ng-repeat="item in items"> 18 <td>{{$index+1}}</td> 19 <td>{{item.name}}</td> 20 <td>{{item.age}}</td> 21 <td>{{item.stature}}</td> 22 </tr> 23 <tr> 24 <td>合计</td> 25 <td></td> 26 <td ng-bind="items | sumAge:items:‘age‘"></td> 27 <td></td> 28 </tr> 29 </table> 30 </div> 31 32 </div> 33 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 34 <script type="application/javascript"> 35 var myApp=angular.module(‘myApp‘,[‘myApp.filter‘]); 36 var appFilter=angular.module(‘myApp.filter‘,[]); 37 //自定义过滤器 38 myApp.filter(‘sumAge‘,function(){ 39 //根据第一个参数,第二个参数求和 40 return function(input,n1,n2){ 41 console.log("输入值 : "+input); 42 console.log("第一个参数: "+angular.toJson(n1)); 43 console.log("第二个参数 :"+n2); 44 var sum=0; 45 angular.forEach(input, function (item) { 46 sum += item.age; 47 }); 48 return sum; 49 } 50 }) 51 52 </script> 53 <script> 54 myApp.controller(‘myCtrl‘, [‘$scope‘, function ($scope) { 55 $scope.items = [ 56 { 57 name: ‘鲁迅‘, 58 age: 27, 59 stature: 165 60 }, 61 { 62 name: ‘胡适‘, 63 age: 25, 64 stature: 170 65 }, 66 { 67 name: ‘契诃夫‘, 68 age: 27, 69 stature: 175 70 }, 71 { 72 name: ‘巴尔扎克‘, 73 age: 29, 74 stature: 165 75 }]; 76 }]); 77 </script> 78 </body> 79 </html>
以上是关于AngularJS-自定义过滤器 ng-repeat 求和的主要内容，如果未能解决你的问题，请参考以下文章