贴几个关于过滤器使用的例子。

1.首先创建一个表格

body ng-app=' app ' div class=' divall ' ng-controller=' table filter '输入类型=' text '占位符='输入要搜索的内容' ng-model=' key ' brbr table cell spacing=' 0 '第Ead TR th name/第th price/第th货架时间/第th description/th/TR/the ad tbbody TR TD { { g . name } }/TD TD { { g . price } }/TD TD { { g . intime } }/TD TD { { g . descriptionApp。控制器(' tablefilter '，函数($ scope) {$ scope。goods=[{name:' HTML5 '，price:20，intime33601488785356895，desc3360' HTML5是html的最新修订版，由万维网联盟于2014年10月发布。}，//时间秒由新的日期()决定。getTime()；Get {name:' JavaScript '，price:30，intime:148868535895，desc:' JavaScript，一种文字脚本语言，是一种动态类型化、弱类型化、基于原型的语言，内置支持类型。}，{name:' css3 '，price:25，intime3360146878535895，desc:' CSS是层叠样式表。}，{name :' angular JS '，price :50，intime :148278535895，desc :' angular js是一个优秀的前端JS框架，在很多Google产品中都有使用。' } ];} /script plus样式，如图

2.看到价格在某个时间出现就奇怪了。好，修改表格。

TD { { g . name } }/TD TD { { g . price | currency } }/TD！-currency : currency-TD { { g . intime | date : ' yyyy-mm-DD ' }/TD！-将秒更改为日期格式年-月-日-TD {{g. desc}}/TD以再次运行

3.这样，就真的碍事了。但是描述太长了。你能在一定数量的单词后停止显示它，并以.

好了，给表添加一个过滤器，叫做descFilter。字数显示。注意不要忘记“|”过滤器符号。

TD { { g . desc | descFilter : 10 } }/TD然后在js中编写desc filter的方法

//定义一个过滤器来过滤desc的字数。如果超过十个单词，app.filter ('desc滤波器'，function(){ return function(content，num){//传递两个参数，一个对应内容，一个对应长度if(content . length num){ content=content . substring(0，num) }返回内容；} });跑去看看

够了。太棒了。

4.搜索框没用。别忘了，我们在上面附加了ng-model='key '。

好的，修改tr。添加过滤条件

tr ng-repeat=' g in goods | filter : key '。保存操作，并尝试在其中搜索内容

。惊人的，惊人的过滤器。

5.你不能按价格分类吗？当然可以。不仅上升而且下降。

在价格标题中添加一个升降按钮

此价格输入类型=' button' ng-show=' isasc ' value='' ng-click=' sort()'输入类型=' button ' ng-show='！isAsc ' value='' ng-click=' sort()'/th .修改js

pre name=' code ' class=' JavaScript ' $ scope . isasc=false；//将isAsc变量定义为false，默认为升序；$ scope . sort=function(){ $ scope . isasc=！$ scope.isAsc//提升开关}/prebr p/p pre/pre 4。更新过滤器排序标准br

pre name=' code ' class=' html ' tr ng-repeat=' g in goods | filter : key | order by : ' price ' 3360 isasc '/prebr p/p p再次运行。你可以按升序和降序来做。你完蛋了！/p pimg src=' http :http://img . blog . csdn . net/20170306190351615 ' alt=' " br/p pimg src=' http :http://img . blog . csdn . net/20170306190425762 ' alt=' " br/p

以上是边肖介绍的AngularJS Filter例子的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！