angular过滤器

最新推荐文章于 2022-06-15 17:26:27 发布

小白的成长之路_

最新推荐文章于 2022-06-15 17:26:27 发布

阅读量137

点赞数

本文链接：https://blog.csdn.net/XiaoZhuang__/article/details/78741393

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular.min.js" ></script>
   </head>
   <body ng-app="myapp" ng-controller="mycrl">
       <div>
           <input type="text" ng-model="name"/><br />
           {{name}} <br/>
           
           {{name|currency:"¥"}} <br />
       </div>

       <div>
           <input type="text" ng-model="name1"/><br />
           
           {{name1|uppercase}}<br />
           {{name1|lowercase}}<br />

           
           {{name1|limitTo:2}}<br />
       </div>

       <div>
           
           {{sz|filter:3}}<br />

{{sz1|filter:20}}<br />

ng-repeat="g in goods|filter:showname|filter:showtel" //可以设置多个过滤器

{{sz|orderBy}}<br />
           {{sz1|orderBy:"-bb"}}
       </div>
       <script type="text/javascript">
           var mo=angular.module("myapp",[]);
           mo.controller("mycrl",function($scope){
               $scope.sz=[1,3,5,2,6,9,8,7,23,32];
               $scope.sz1=[{"aa":"李四","bb":18},{"aa":"张三","bb":20}];
           });
       </script>
   </body>

</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>自定义过滤器</title>
       <script type="text/javascript" src="js/angular.min.js" ></script>
   </head>
   <body ng-app="myapp" ng-controller="mycrl">
       <input type="text" ng-model="name" />
       {{name|myfilter}}
       <script type="text/javascript">
           var mo=angular.module("myapp",[]);
           mo.controller("mycrl",function($scope){

           });
           /*//filter()方法*/
           mo.   filter("myfilter",function(){


               return function(name){
                   //因为加载之后没有值为undefined所以判断一下
                   if(name==undefined){
                   return "";
                    }
                   myname="";
                   //符合就替换
                   if(name.indexOf("华")!=-1){
                       myname=name.replace(/华/g,"***");
                       return myname;
                   }
                   //不符合就原路返回
                   return name;
               }
           });
       </script>
   </body>
</html>