首页 > 代码库 > AngularJS-自定义过滤器 ng-repeat 求和

AngularJS-自定义过滤器 ng-repeat 求和

2024-10-16 13:50:40   215人阅读

 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 求和


联系
我们