• 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>
  • 相关阅读:
    数据库(DB)
    PHP课程设计
    版本号设计规则
    设计模式(Java)
    简单的流式布局(移动应用开发)
    laravel工作机制(PHP程序设计)
    接口自动化测试(软件测试)
    Java学习路线
    ES6基础知识
    promise
  • 原文地址:https://www.cnblogs.com/qiushuiblog/p/7116193.html
Copyright © 2020-2023  润新知