angular的filter
angular的filter
filter两种用法
1、在模板中使用filter
{{expression|filter}}//基本用法
{{expression|filter1|filter2|filter3}}//多个过滤器，上一段输出为下一段输入
{{expression|filter:args1,args2,...}}//带参数
除了使用简单的表达式，还可以在ng-repeat中使用，在这里我们获得处理的对象是一个数组，或者对象，不是单个的item
<span ng-repeat="a in arr|filter"></span>
2、在controller和serveice中使用filter
使用filter，在间接使用
app.controller('MyCtrl',function($scope,$filter){
$scope.num = $filter('currency')(123456);
$scope.date = $filter('date')(new Date());
});
直接使用
app.controller('MyCtrl',function($scope,currencyFilter){
$scope.num = currencyFilter(123456);
});
filter中需要注意的一点是，filter这个名字的也是一个angular本身自带的filter，用来匹配子串的。
自定义过滤器
最简单的用法
app.filter('hello',function(){
return function(input){
var str = 'hello world';
return str;
}
});
加上参数的用法
app.filter('ha',function(){
return function(input,args,args2){
var str = 'hello world'+args+args2;
return str;
}
});
filter在使用时的坑
ng-repeat中的$index
这里在使用$index就会面临，在filter出匹配的子串之后，$index的值不变化的问题，对应值就不是现在的list
<body ng-app="demo">
<p>Click the test button to see what result you would get when using <code>$index</code>
vs when using <code>item</code> directly</p>
<p>Try filtering for example for <kbd>foo</kbd> and you'll get a different result</p>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="filter" placeholder="Filter the list">
<ul>
<li ng-repeat="item in items | filter:{ name: filter }">
{{item.name}}
<button ng-click="getResult($index, item)">test</button>
</li>
</ul>
<h2>Results</h2>
<p><code>$index:</code> {{indexResult.name}}</p>
<p><code>item:</code> {{itemResult.name}}</p>
</div>
</body>
var app = angular.module('demo', ['ng']);
app.controller('DemoCtrl', ['$scope', function($scope) {
$scope.items = [
{ name: 'Hello' },
{ name: 'Foobar' },
{ name: 'Barfoo' },
{ name: 'Magic' },
{ name: 'Wand' }
];
$scope.getResult = function($index, item) {
$scope.indexResult = $scope.items[$index];
$scope.itemResult = item;
};
}]);
angular的filter的更多相关文章
- angular的$filter服务
首先,介绍下$filter服务: 1.$filter是用来进行数据格式化的专用服务: 2.AngularJS内置了currency.date.filter.json.limitTo.lowercase ...
- Angular之filter学习
过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们 ...
- angular 自定义filter
用modul.filter .filter("fiilterCity",function(){ return function(obj){ var newObj = []; ang ...
- angular入门--filter搜索
首先,列表绑定忽略 先上代码 <html ng-app="app1"> <head> <meta charset='utf-8' /> < ...
- 转载:Angular的filter总结
过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组 中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它 ...
- [Angular 2] Filter items with a custom search Pipe in Angular 2
This lessons implements the Search Pipe with a new SearchBox component so you can search through eac ...
- Angular Input格式化
今天在Angular中文群有位同学问到:如何实现对input box的格式化.如下的方式对吗? <input type="text" ng-model="demo. ...
- Part 13 Create a custom filter in AngularJS
Custom filter in AngularJS 1. Is a function that returns a function 2. Use the filter function to cr ...
- 【转】Angular Input格式化
今天在Angular中文群有位同学问到:如何实现对input box的格式化.如下的方式对吗? <input type="text" ng-model="demo. ...
随机推荐
- 实例讲解Nginx下的rewrite规则
一．正则表达式匹配,其中:* ~ 为区分大小写匹配* ~* 为不区分大小写匹配* !~和!~*分别为区分大小写不匹配及不区分大小写不匹配二．文件及目录匹配,其中:* -f和!-f用来判断是否存在文件* ...
- Hibernate逍遥游记-第2章-使用hibernate.properties
1. package mypack; import org.hibernate.*; import org.hibernate.cfg.Configuration; import java.util. ...
- POJ2586——Y2K Accounting Bug
Y2K Accounting Bug Description Accounting for Computer Machinists (ACM) has sufferred from the Y2K ...
- Android 签名(1)为什么要签名
所有的应用程序都必须有数字证书,Android系统不会安装一个没有数字证书的应用程序 签名可以: 1,用特权,2完整性鉴别,3安全保证, 1,专用权限或特权要签名 一些特权要经签名才允许.签名可用:S ...
- s3c6410 开发板Linux系统支持 K9GAG08U0E的方法
由于NandFlash硬件升级比较快,公司去年一直在使用三星的K9GAG08U0D,现在MLC NandFlash 升级到了第二代,K9GAG08U0D 很快就会处在停产的状态,未雨绸缪,公司选型了K ...
- 【HDOJ】4347 The Closest M Points
居然是KD解. /* 4347 */ #include <iostream> #include <sstream> #include <string> #inclu ...
- 3月下旬剩余poj题解
poj1700 数学推导+简单dp poj2390 水题不说什么了 poj3260 先对找的钱做完全背包，在对能付的钱做多重背包，注意这道题能付的钱数的上界 poj2516 裸的最小费用最大流了没什么 ...
- (转载)Web存储和SessionStorage locaStorage
<转> sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在 ...
- UVa 442 (栈) Matrix Chain Multiplication
题意: 给出一个矩阵表达式,计算总的乘法次数. 分析: 基本的数学知识:一个m×n的矩阵A和n×s的矩阵B,计算AB的乘法次数为m×n×s.只有A的列数和B的行数相等时,两个矩阵才能进行乘法运算. 表 ...
- 8.20 usaco
summary:14 1.k短路 2.tarjan缩无向图点 3.复习了SA 4.差分约束 5.求第二短路 洛谷3824:dfs优化背包.开始的时候mle了,然后我就把a[i],w[i]去掉....就 ...