AngularJS的过滤器总结

来源：互联网发布：广东联通宽带提速软件编辑：程序博客网时间：2024/06/05 05:40

var app = angular.module("myapp",[]);

////////////自定义过滤器

           app.filter("demof",function(){
               return function(input){
                   //首字母大写
                   //var v=input.trim()[0].toUpperCase()+input.slice(1);

                   var v =input.replace(/是/g,"*");
                   return v;
               }
           });

           app.controller("democ",["$scope",function(aa){
               aa.nowtime=new Date();
               aa.datas=["aa","bb","cc","vv","ff"];
               aa.datas2=["egg","apple","bank","morn","good","zone"];
               aa.datas3=[{name:"刚刚",age:12},{name:"基金",age:19},{name:"正则",age:15},{name:"王五",age:15}];

}

         <body ng-app="myapp" ng-controller="democ">
       <table border="1px solid black" cellspacing="0">
           <tr>
               <td>currency 货币处理</td>
               <td><input type="text" ng-model="money"/></td>
               <td>{{money|currency:'$'}}</td>
           </tr>


           <tr>
               <td>uppercase:转为大写</td>
               <td><input type="text" ng-model="up"/></td>
               <td>{{up|uppercase:''}}</td>
           </tr>
                <tr>
               <td> date: 数据    </td>

               <td colspan="2">{{nowtime|date:'yyyy-MM-dd hh:mm:ss'}}</td>

           </tr>

              <tr>
               <td>limitTo:取前几个或者后几个 </td>
               <td>{{datas}}</td>
               <td>{{datas|limitTo:3}}</td>
              </tr>
              <tr>
               <td>filter 模糊查询</td>
               <td>{{datas2}}</td>
               <td>{{datas2|filter: "e"}}</td>
              </tr>

           <tr>
               <td>orderBy排序: 升序数组|orderBy: '':false;</td>
               <td>{{datas2}}</td>
               <td>{{datas2|orderBy: '':false}}</td>

           </tr>

           <tr>
               <td>orderBy排序: 升序</td>
               <td>{{datas3}}</td>
               <td>{{datas3|orderBy: ['age','name']:true}}</td>

           </tr>

           <tr>
               <th colspan="3">自定义过滤器</th>
           </tr>

           <tr>
               <td>自定义首字母大写</td>
               <td ><input ng-model="name"/></td>
               <td>{{name|demof}}</td>
           </tr>

           <tr>
               <td>屏蔽敏感字符</td>
               <td ><input ng-model="name"/></td>
               <td>{{name|demof}}</td>
           </tr>
       </table>
   </body>

           ]);

       </script>

阅读全文

0 0