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的先介绍到这里,有什么疑问或者想法,请留言!

时间: 2024-10-25 03:51:56

angularjs培训之filter的相关文章

AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

1.切换目录,启动项目 git checkout step-9 npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3.效果: 4.代码实现: 这里主要是使用filter过滤器来进行数据过滤,这里只是在前端进行数据过滤,原始数据是不发生变化的. $filter:Filters are used for formatting data displayed to the user,格式化要显示的数据. 用法: {{ expres

angularjs培训之重新理解双向绑定和事件详解

双向绑定是angularjs亮点之一,在前面的<angularjs培训之helloworld>篇中大概介绍了下双向绑定,现在我们"旧事重提",先看下下面的代码片段: view中:  <input type='button' ng-click="set()" value="set Value">  <input type="text" ng-model='userName2'> control

AngularJS学习笔记filter

filter是对数据进行过滤操作,比如按某个字段搜索.格式化数据等等,是一个非常有用的接口.下面就简单介绍下它的用法. AngularJS自带的filter接口,|是filter的分隔符,参数用:分隔: currency,格式化number,货币化,默认是转化成美元  param(number,symbol),返回值将会把数字每3位加一个逗号 <input type="number" ng-model="amount"/> <p>默认美元:{

angularJS学习小结——filter

引言 filter过滤器对于我们来说并不陌生,他和我们现实生活中的过滤器的意思差不多,它的作用就是接收一个输 入的值,然后按照某个规则进行处理然后输出最后的结果,例如我们输入一个数字,然后我们需要得到货币形式的数 据,这样我们就可以利用过滤器来实现,angularJS中的过滤器是非常简单的,分为内置和自定义两种,下面小编就 简单的给大家介绍一些. 内置过滤器 ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象). li

AngularJS学习之filter过滤器的用法

系统的学习angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. 一,内置的过滤器 1,uppercase,lowercase大小转换 {{ "lower cap string" | uppercase }}   //结果:L

Angularjs中的$filter

官方文档:https://docs.angularjs.org/api/ng/filter/filter 1.Angularjs本身自带了一些filter currency: 为数字添加货币符号. {{currency_expression || currency: symbol:fractionSize}} 其中symbol.fractionSize是可选择的,symbol是定义货币符号,默认是$,fractionSize是小数点后的位数,默认是原数 date:格式化日期 {{date_exp

angularjs中的filter(过滤器)

源文地址:http://www.ncloud.hk/技术分享/angularjs中的filter-过滤器/ filters可以用来格式化数据.例如把时间格式化成为yyyy-MM-dd的形式来呈现给用户,方便查看.angularjs内置了一些filters,我们也可以根据自己的需要自定义一些filters. 下面是angularjs提供的filters: currency:格式化一个数字成为一种货币.当没有提供任何货币符号时,使用当前区域的默认符号. number:格式化数字成为文本 filter

AngularJS 自定义过滤器Filter 问题

在网上看了很多angularJS过滤器的文章,但是觉得写的比较模糊,之前试了好几次都不成功,这次成功了记录一下. App.filter('deployFilter',function(){ return function(value){ switch (value){ case 'UNDEPLOY' : value = '未部署'; break; case 'DEPLOYED' : value = '已部署'; break; default : break; } return value; }

AngularJs(八) 过滤器filter创建

大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constant("productsUrl", "http://localhost:27017/products") .controller("defaultCtrl", function ($scope, $http, productsUrl) { $http.