angularjs培训之filter

在angularjs中,filter提供了格式化数据或者过滤数据的功能:

1、请看下面简单的例子

<div ng-controller="phoneListExtendController">

I have {{friends.length}} friends. They are:

 <input type="search" ng-model="q" placeholder="filter friends..." />

 <ul>

   <li ng-repeat="friend in friends | filter:q">

     [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.

   </li>

 </ul>

 <hr>

 <ul>

   <li ng-repeat="name in names | filter : ‘j‘">

      [{{$index + 1}}] is {{name}}. 

   </li>

   total {{names.length}}

 </ul>

</div>

controller定义在了controller2.js中,我们只用ng-repeat指令循环遍历friends,显示每个人的姓名和年龄,

这个不是我们今天介绍的重点,继续看:

我们通过管道方式使用filter ng-repeat="friend in friends | filter:q" ,并且filter绑定了一个model,

这个model是个input框,也就是说你输入的内容就是做为了ng-repeat的输入,遍历friends中的属性,判断是否包含

输入的字符。

效果如下:


2、也可以指定要过滤的字符串,代码如下:

<li ng-repeat="name in names | filter : ‘j‘">

      [{{$index + 1}}] is {{name}}. 

   </li>

3、如果在controller中动态指定需要过滤的内容,修改代码如下:

<li ng-repeat="friend in friends | filter:q.name">

[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.

</li>

另外还需要在controller中给$scope挂一个属性值,

$scope.q = {

name : ‘m‘

}

有上述的代码就可以实现动态过滤集合的功能。

4、自定义filter

   当然内置的filter无法满足你所有的需求,这时你就可以搞了,想怎么搞就可以怎么搞了,你要你愿意。

   通常我们可以使用module的filter方法来定义一个。如下:

   module.filter(filterName,function(){

    return function(input){

        return ;

    }

   }); 

   我们现在先实现一个用filter给字符串增加个!号,

   先声明一个字符串 $scope.filters = ‘this is my first filter‘;

   接下来我们来定义filter:

   app.filter(‘myFilter‘,function(){

    return function(input){

        return input + "!";

    }

}); 

   说明: myFilter :filter名称

          input : 定义的字符串的值。


   下面就是显示内容了:      

   在标签中使用 {{filters | myFilter}}. 

   剩下来就交给你了,try it!

5、内置(build-in)filter:

currency,date,filter,json,limitTo,lowercase,number,orderBy,uppercase

这些用法都比较简单,不再附上例子了,详细的可以参考

http://docs.angularjs.cn/api/ng/filter  


filter的先介绍到这里,有什么疑问或者想法,请留言!


本文出自 “Eason's hcc” 博客,请务必保留此出处http://hcc0926.blog.51cto.com/172833/1559668

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。