首页 > 其他 > 详细

关于ng的过滤器的详细解释angular-filte

时间:2017-04-12 20:43:10      阅读:226      评论:0      收藏:0      [点我收藏+]

在使用ng框架做项目的时候,我们可能会使用到ng自带的过滤器,来进行数据的筛选

一:ng自带的过滤器:currency ,date,limitTo,lowercase,uppercase,number,orderBy ,json,filter

过滤器有两种使用方法:第一种,页面是直接使用;第二种,js中使用

以上的过滤器的使用时偏简单的,查看文档对你很有用

这里,我们来讲解一下 上面的简单中的很少用到的json,filter

关于json过滤器的作用是将一个javaScript对象转化为一个JSON字符串:

  demo:  

 

  <div>

     {{ {name: ‘Ari‘, City: ‘SanFrancisco‘} | json }} 

 </div>

页面显示的效果是:{ "name": "Ari", "City": "SanFrancisco" }

关于filter过滤器的用法:

 页面中直接使用

   <div>

      {{ ["aaassddd","bbbdddeee","kkklljj"] | filter:"!e" }}

   </div>

 页面显示的效果是:["aaassddd","kkklljj"]

 

 举一个在js中使用的demo吧

<!doctype html>

<html lang="en" ng-app="myApp">

 <head>

   <script src="angular.js"></script>    

 </head>

 <body>

     <div ng-controller="filterCtrl">

                 {{name}}

                 {{dollar}}

                 {{ [‘Ari‘,‘Lerner‘,‘Likes‘,‘To‘,‘Eat‘,‘Pizza‘] | filter:‘e‘ }}

                 {{ {name: ‘Ari‘, City: ‘SanFrancisco‘} | json }}

                 {{ ["aaassddd","bbbdddeee","kkklljj"] | filter:"!e" }}

       </div>

 </body>

</html>

<script>

         angular.module("myApp",[])

                 .controller("filterCtrl",["$scope","$filter","currencyFilter",function(s,f,c){//方式一:直接使用$filter, 方式二:使用***Filter 

                      s.name=f(‘lowercase‘)("ARTDF");  

                      s.dollar=c(234);

                 }])

</script>

:讲解了ng的内置过滤器,我们来 学学如何自定义过滤器

    ng的自定义过滤器返回的是一个函数,我们可以在这个函数里进行系列操作

   js:

 var myFilter=angular.module("filterModule",[])

 

  .filter("filter1",function(){

 

    return function(item){

 

       return item+‘ABCDE‘;

 

    }

 

  });

html:

 <div>{{432432423432| date:"yyyy-MM-dd"|filter1}}</div>

结果:1983-09-15ABCDE

 

关于ng的过滤器的详细解释angular-filte

原文:http://www.cnblogs.com/evaling/p/6701058.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!