㈠ angularjs怎么获取过滤器选择后的数据
AngularJS的内置过滤器使用方法:
一个过滤器，不带参数的情况
{{expression | filter}}
一个过滤器，带参数的情况
{{expression | filter:arguments}}
一个过滤器，带多个参数的情况
{{expression | filter: arg1: arg2: ...}}
多个过滤器，不带参数的情况
{{expression | filter1 | filter2 | ...}}
分别使用以下AngularJS的内置过滤器
currency
currency允许我们设置自己的货币符号，默认情况下会采用客户端所处区域的货币符号。
可以这样使用：{{ 3600 | currency: "$￥"}}
返回结果为$￥123.00
online code点击预览
number
number过滤器将数字格式化成文本，它的参数是可选的，用来控制小数点后的截取位数
如果传入的是一个非数字字符，会返回空字符串
可以这样使用：{{ 3600 | number:2}}
返回结果为：3,600.00
online code点击预览
lowercase
lowercase将字符串转换为小写
可以这样使用：{{ "HEllo" | lowercase}}
返回结果为：hello
online code点击预览
uppercase
uppercase将字符串转换为大写
可以这样使用：{{ "HEllo" | uppercase}}
返回结果为：HELLO
online code点击预览
㈡ 在什么地方使用angularjs过滤器
一、在视图模板（View Template）中使用
在表达式中应用Filters （过滤器）
需要遵循格式如下：
{{ expression | filter }} 即 {{ 表达式 | 过滤器 }}
例如：{{ 12 | currency }} 输出为 $12.00
在输出结果中应用Filters （过滤器）
通俗点讲就是Filter的叠加--前一filter的输出结果作为后一filter的输入数据源.
需要遵循格式如下：
{{ expression | filter1 | filter2 | ... }} 即 表达式(expression)使用filter1过滤后再使用filter2过滤...
带参数的Filter
Filter后面可以跟一个或多个参数，用来帮助实现特殊要求、需求的filter.
需要遵循格式如下：
{{ expression | filter:argument1:argument2:... }}
示例： {{ 1234 | number:2 }} = 1,234.00
END
二、使用 AngluarJS 内置Filter
AngularJS为我们提供了9个内建的过滤器
分别是currency, date, filter, json, limitTo, uppercase， lowercase, number, orderBy。
具体的用法在AngularJS的文档中都有详细说明。下面只说几个常用的。
currency filter（货币过滤器)
currency – 用来将变量转换成货币表现形式
如：{{ amount | currency}}
uppercase/lowercase filter（字母大小写filter）
如：
{{ "lower cap string" | uppercase }}
<input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}
date filter (日期filter)
如：
{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
json filter
如：
{{ {foo: "bar", baz: 23} | json }}
END
在controllers， services和drictives中使用filter
1
可以在AngularJS的controller, service或者driective中使用filter, 这时候你需要将依赖的filter名字加入到controller, service或者directive的依赖中去。
2
在controller中直接使用filter， 这样controller可以根据自身需要而适时调用filter
END
三、自定义filter（过滤器）
1
AngularJS编写自定义过滤器的形式和AngularJS的factory service非常相像，一定记得它返回一个对象或者是一个函数即可，编写的时候，只需要一个带有一个以上参数的函数即可。
2
格式大致如：
app.filter('filter(过滤器)名称',function(){
return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){
//...执行业务逻辑代码
return 处理后的对象;
}
});
㈢ angularjs中有多个过滤器使用方法
一、在视图模板（View Template）中使用
在表达式中应用Filters （过滤器）
需要遵循格式如下：
{{ expression | filter }} 即 {{ 表达式 | 过滤器 }}
例如：{{ 12 | currency }} 输出为 $12.00在输出结果中应用Filters （过滤器）
通俗点讲就是Filter的叠加--前一filter的输出结果作为后一filter的输入数据源.
需要遵循格式如下：
{{ expression | filter1 | filter2 | ... }} 即 表达式(expression)使用filter1过滤后再使用filter2过滤...
带参数的Filter
Filter后面可以跟一个或多个参数，用来帮助实现特殊要求、需求的filter.
需要遵循格式如下：
{{ expression | filter:argument1:argument2:... }}
示例： {{ 1234 | number:2 }} = 1,234.00END
二、使用 AngluarJS 内置Filter
AngularJS为我们提供了9个内建的过滤器
分别是currency, date, filter, json, limitTo, uppercase， lowercase, number, orderBy。
具体的用法在AngularJS的文档中都有详细说明。下面只说几个常用的。
currency filter（货币过滤器)
currency – 用来将变量转换成货币表现形式
如：{{ amount | currency}}
uppercase/lowercase filter（字母大小写filter）如：
{{ "lower cap string" | uppercase }}
<input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}
date filter (日期filter)
如：
{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
json filter
如：
{{ {foo: "bar", baz: 23} | json }}
END
在controllers， services和drictives中使用filter1可以在AngularJS的controller, service或者driective中使用filter, 这时候你需要将依赖的filter名字加入到controller, service或者directive的依赖中去。
2在controller中直接使用filter， 这样controller可以根据自身需要而适时调用filterEND
三、自定义filter（过滤器）
1AngularJS编写自定义过滤器的形式和AngularJS的factory service非常相像，一定记得它返回一个对象或者是一个函数即可，编写的时候，只需要一个带有一个以上参数的函数即可。
2格式大致如：
app.filter('filter(过滤器)名称',function(){return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){//...执行业务逻辑代码return 处理后的对象;
}
});
㈣ Angularjs过滤器使用详解
给大家介绍下什么是
AngularJS?
AngularJS是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用数据绑定和依赖注入，它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现，这也使得它能够完美地和任何服务器端技术结合。
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。
AngularJS提供了过滤器来对输入输出数据格式化。下面开始给大家介绍Angularjs过滤器使用，一起看看吧
•在html文件中和在js文件中使用
$scope.form_time
=
$filter('date')($scope.time,
'yyyy-MM-dd
HH:mm:ss');
<p>{{time
|
date:
'yyyy-MM-dd
HH:mm:ss'}}</p>
•内部过滤器和自定义过滤器
.filter('my_data_format',[function(){
return
function(data,str,sss){
console.log('data:
',data,'
str:
',str,'
sss:
',arguments[2]);
}
}]);
//var1就是第一个参数data，
123是第二个参数str，
this是第三个参数
<p>{{var1
|
my_data_format
:
123
:
'this'}}</p>
//对传入的数据进行处理
.filter('my_data_format',[function(){
return
function(data,str){
var
arr=[];
angular.forEach(data,
function(one_list){
if(one_list.status
==
str){
arr.push(one_list);
}
});
return
arr;
}
}]);
//过滤器可以用在绑定的值中,也可以用在ng-if="(lists
|
my_data_format:
'2').length>0",
和ng-show等；类似的表达式中。作为判断语句
<p
ng-repeat
=
"list
in
lists">姓名:{{list.name}},人数{{(lists
|
my_data_format:
'2').length}}</p>
㈤ angular写的过滤器 怎么引入
1.过滤器是用来格式化需要展示给用户的数据，AngularJS中含有实用的内置过滤器可以使用，也支持用户进行自定义过滤器；
2.过滤器调用方式：
(1) 在HTML的模板中绑定符合{{}} 内通过 | 符号来调用过滤器； 比如{{ name | uppercase }} ------将name字符串中的每个字符转为大写字母；
(2) 在JavaScript中可以通过$filter 来调用过滤器，比如：
[javascript] view plain
app.controller("demoController",['$scope','$filter',function($scope,$filter){
$scope.name = $filter("uppercase")('ari')；
}]);
(3) 在HTML中使用过滤器时，如需要传递参数给过滤器，则需要在过滤器后面加冒号即可，若有多个参数，则在每个参数后面加入冒号即可，比如 {{ 123.4567 | number : 2}} 页面展示为 123.46
3.angularJS 提供的内置过滤器：
(1) currency： 可以将一个数值格式化为货币格式，默认的货币符号是当前客户端所处区域的货币符号；
(2)date：将日期格式化为需要的格式，具体的格式参考其API；
(3) filter：从给定数组中选择一个子集，并将其生成一个新数组返回。filter过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素函数，传入不同类型时表现：
1) 字符串：返回所有包含这个字符串的元素，如想返回不包含该字符串的所有元素，则在参数之前加 ! ；
2) 对象：AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较，若属性值是字符串就会判断是否包含该字符串；若希望对全部属性进行对比，将$作为键名；
3) 函数： 对待过滤数组的每个元素执行此函数，返回非假值的元素会出现在新的数组中并返回；
filter的第二个参数可以是：
1)true： 用angular.equals(excepted,actual)对两个值进行严格比较；
2) false：进行区分大小写的子字符串比较；
3)函数：运行这个函数，如果返回真值就接受这个元素；
(4) json：将一个JSON或JavaScript对象转换成字符串；
(5) limitTo ：根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过传入参数的正负值来控制从前面还是后面进行截取；
如果传入的长度大于被过滤的数组或字符串的长度，则整个数组或字符串都会被返回；
{{ San is very people | limitTo : 3}} ----> San {{ San is very people | limitTo : -3}} ---->ple
(6)lowercase 将过滤字符串转为小写字母； uppercase 将过滤字符串转为大写字母；
(7) number ：将数字格式化成文本，第二个参数是可选，用于控制小数点后截取的位数； 如果传入的是非数字字符，则返回空字符串；
(8) orderBy：用表达式对指定的数组进行排序，可以接受两个参数，第一个参数是必须的，第二个参数是可选，第一个参数的情况：
1) 函数：当第一个参数是函数时，该函数会被当作待排序对象的getter方法；
2)字符串：对这个字符串进行解析的结果将决定数组元素的排序方式，可以使用+ 或 - 来强制进行升序和降序；
3)数组：在排序表达式中使用数组元素作为谓词； 第二个参数用来控制排序的方向；
4.自定义过滤器：
此过滤器用来定义一个名为myFilter的过滤器，作用是将传入的字符串的首字母转为大写字母；
[javascript] view plain
angular.mole("testFilter",[]).filter("myFilter",function(){
return function(input) {
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
}
});
5.表单验证：
(1) 若想要屏蔽浏览器对表单的默认验证行为，则在表单元素上添加 novalidate标记，若想使用angularJS 的表单验证功能，需要保证form有name属性；
(2) input上可以使用的验证选项：
1)required：验证当前input是否有值，必填项；
2) ng-minlength/ng-maxlength：当前input能输入的最大长度和最小长度； <input name="text" ng-minlength="2" ng-maxlength="20"/>
3) ng-pattern ：模式匹配，用来确保输入能够匹配指定的正则表达式；
4) email：验证输入的内容是否是电子邮件，<input type="email" name="email"/>
5) number：验证输入的内容是否是数字 <input type="number" name="age"/>
6) URL：验证输入的内容是否是URL <input type="url" name="homespace"/>
在javaScript中可以使用这些属性去对表单做出实时响应 通过formName.inputFieldName.property格式访问属性：
1) formName.inputFieldName.$pristine：用来判断用户是否修改了表单，若未修改则返回true，若修改过，则返回false；
2) formName.inputFieldName.$dirty：只用用户修改过表单，无论输入是否通过验证，该值都返回true；
3) fornName.inputFieldName.$valid：用来判断表单的内容是否合法，若表单内容是合法的则返回true；
4) fornName.inputFieldName.$invalid：用来判断表单的内容是否不合法，若表单内容是不合法的则返回true；
5) fornName.inputFieldName.$error：用来判断表单所有的验证内容以及内容是否合法，如果验证失败，则属性值为true，若输入字段的值通过验证则返回false；
(3) $parsers:
当用户同控制器进行交互并且ngModelController中的$setViewValue()方法被调用时，$parsers数组中的函数会以流水线的形式被逐个调用，第一个调用值会变传入到第二个$parse中；调用函数时，可以使用$setValidity()函数去设置表单的合法性；
(4) $formatters：
当绑定的ngModel值发生变化，并经过$parsers数组中解析器处理后，这个值会被创递给$formatters流水线，此函数可以修改并格式化这些值；
(3) ngMessages( 在AngularJS 1.3+以上版本中才包含此指令)
1)ngMessages是angularJs的一个独立模块，故需要手动加载 指令为 $ bower install --save angular-messages或在angular官网上下载此文件，然后通过html引入；
2)ngMessages还需要作为引用程序的依赖模块引入，比如angular.mole("myApp",[ngMessages]);
㈥ angularjs 控制器中怎样使用过滤器
内置过滤器也可以在js文件中使用，只要在angularjs组件定义时注入$filter组件，即可在内代码中使用过容滤器。
app.controller('testC',['$scope','$filter',function($scope,$filter){
$scope.num = $filter('currency')(123534);
$scope.date = $filter('date')(new Date());
]}
㈦ angularjs过滤器在js中怎么用
一、在视图模板（View Template）中使用 在表达式中应用Filters （过滤器） 需要遵循格式如下： {{ expression | filter }} 即 {{ 表达式 | 过滤器 }} 例如：{{ 12 | currency }} 输出为 $12.00在输出结果中应用Filters （过滤器） 通俗点讲就是...
㈧ angualar js怎么加过滤
系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点。这篇简单说一下angularjs的filter功能，angularjs的filter功能可分为二种，一种是内置的过滤器，一种是自定义的。
一，内置的过滤器
1，uppercase，lowercase大小转换
{{ "lower cap string" | uppercase }} //结果：LOWER CAP STRING{{ "TANK is GOOD" | lowercase }} //结果：tank is good
｜这里的竖线是一种管道功能，如果对linux比较熟悉的话，这块的｜根linux的管道功能，基本是一样的
2，json格式化
{{ {foo: "bar", baz: 23} | json }} //结果：{ "foo": "bar", "baz": 23 }
注意：bza没格式前是没有双引号的，格式化后就转换成了json数据了。
3，date格式化
{{ 1304375948024 | date }} //结果：May 3, 2011{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} //结果：05/03/2011 @ 6:39AM{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //结果：2011-05-03 06:39:08
4，number格式化
{{ 1.234567 | number:1 }} //结果：1.2{{ 1234567 | number }} //结果：1,234,567
5，currency货币格式化
{{ 250 | currency }} //结果：$250.00{{ 250 | currency:"RMB ￥ " }} //结果：RMB ￥ 250.00
6，filter查找
{{ [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}] | filter:'s'}} //查找含有有s的行 //上例结果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}] {{ [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}] | filter:{'name':'iphone'} }} //查找name为iphone的行 //上例结果:[{"age":20,"id":10,"name":"iphone"}]
7，limitTo字符串，对像的截取
{{ "i love tank" | limitTo:6 }} //结果：i love{{ "i love tank" | limitTo:-4 }} //结果：tank {{ [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}] | limitTo:1 }} //结果：[{"age":20,"id":10,"name":"iphone"}]
8，orderBy对像排序
{{ [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}] | orderBy:'id':true }} //根id降序排 {{ [{"age": 20,"id": 10,"name": "iphone"},{"age": 12,"id": 11,"name": "sunm xing"},{"age": 44,"id": 12,"name": "test abc"}] | orderBy:'id' }} //根据id升序排
二，自定filter功能
我找了一个基本angularjs的mvc框架，phonecat，自定义filter也是在这基础写的，这个框架挺好用的。
1，filters.js添加一个mole
angular.mole('tanktest', []).filter('tankreplace', function() { return function(input) { return input.replace(/tank/, "=====") };});
2，app.js中加载这个mole
var phonecatApp = angular.mole('phonecatApp', [ 'ngRoute', 'phonecatControllers', 'facebookControllers', 'tanktest']);
3，html中调用
{{ "TANK is GOOD" | lowercase |tankreplace}} //结果：===== is good
注意：| lowercase |tankreplace管道命令可以有多个
三、filter的两种使用方法
1. 在模板中使用filter
我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法如下：
{{ expression | filter }}
也可以多个filter连用，上一个filter的输出将作为下一个filter的输入（怪不得这货长的跟管道一个样。。）
{{ expression | filter1 | filter2 | ... }}
filter可以接收参数，参数用 : 进行分割，如下：
{{ expression | filter:argument1:argument2:... }}
除了对{{}}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：
<span ng-repeat="a in array | filter ">
2. 在controller和service中使用filter
我们的js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，例如我要在controller中使用currency过滤器，只需将它注入到该controller中即可，代码如下：
app.controller('testC',function($scope,currencyFilter){ $scope.num = currencyFilter(123534);}
在模板中使用{{num}}就可以直接输出$123,534.00了！在服务中使用filter也是同样的道理。
此时你可能会有疑惑，如果我要在controller中使用多个filter，难道要一个一个注入吗，这岂不太费劲了？小兄弟莫着急~ng提供了一个$filter服务可以来调用所需的filter，你只需注入一个$filter就够了，使用方法如下：
app.controller('testC',function($scope,$filter){ $scope.num = $filter('currency')(123534);$scope.date = $filter('date')(new Date());}
可以达到同样的效果。好处是你可以方便使用不同的filter了。
㈨ angularjs过滤器相关问题
先来看看这些内置过滤器使用方法:
一个过滤器，不带参数的情况
{{expression | filter}}
一个过滤器，带参数的情况
{{expression | filter:arguments}}
一个过滤器，带多个参数的情况
{{expression | filter: arg1: arg2: ...}}
多个过滤器，不带参数的情况
{{expression | filter1 | filter2 | ...}}
下面我们分别使用以下AngularJS的内置过滤器
currency
currency允许我们设置自己的货币符号，默认情况下会采用客户端所处区域的货币符号。
可以这样使用：{{ 3600 | currency: "$￥"}}
返回结果为$￥123.00
online code点击预览
number
number过滤器将数字格式化成文本，它的参数是可选的，用来控制小数点后的截取位数
如果传入的是一个非数字字符，会返回空字符串
可以这样使用：{{ 3600 | number:2}}
返回结果为：3,600.00
online code点击预览
lowercase
lowercase将字符串转换为小写
可以这样使用：{{ "HEllo" | lowercase}}
返回结果为：hello
online code点击预览
uppercase
uppercase将字符串转换为大写
可以这样使用：{{ "HEllo" | uppercase}}
返回结果为：HELLO
online code点击预览
json
json过滤器可以将一个JSON或者JavaScript对象转换成字符串。
这个过滤器对调试相当有用
可以这样使用：{{ {"name":"dreamapple","language":"AngularJS"} | json}}
返回结果为：{ "name": "dreamapple", "language": "AngularJS" }
online code点击预览
date
date过滤器将日期过滤成你想要的格式，这个实在是很好的过滤器。
这个过滤器用法很多我这里列举几种常用的
{{ today | date: "yyyy - mm - dd"}}
结果为：2015 - 15 - 13
{{ today | date: "yyyy - mm - dd HH:mm::ss"}}
结果为：2015 - 18 - 13 20:18::38
[online code](2015 - 18 - 13 20:18::38)
还有三个内置的过滤器，但是使用稍微复杂一点，放在下一篇文章中我们大家一起探讨吧
㈩ angularjs自定义过滤器怎么写
过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处回理后的结果。主要答用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。
AngularJS中为我们提供了一些内置的过滤器，这里列举一些自定义过滤器的场景。