详解AngularJS中自定义过滤器,angularjs过滤器

过滤器(filter)正如其名,效用正是抽出二个输入,通过有些准绳实行管理,然后回来管理后的结果。首要用在数量的格式化上,譬喻获取叁个数组中的子集,对数组中的成分举行排序等。ng内置了有的过滤器,它们是:currency(货币)、date(日期)、filter(子串相称)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。除外还足以自定义过滤器,那一个就庞大了,能够满足任何供给的多少管理。

AngularJS中为大家提供了一部分放权的过滤器,这里列举部分自定义过滤器的气象。

自定义过滤器,不带参数

//过滤 不带参数
app.filter('ordinal', function () {
return function (number) {
if (isNaN(number) || number < 1) {
return number;
} else {
var lastDigit = number % 10;
if (lastDigit === 1) {
return number + 'st'
} else if (lastDigit === 2) {
return number + 'nd'
} else if (lastDigit === 3) {
return number + 'rd'
} else if (lastDigit > 3) {
return number + 'th'
}
}
}
});

大约这么使用:

{{777 | ordinal}}

过滤 带参数

把某部地方上的假名调换来大写。

//过滤 带参数
app.filter('capitalize', function () {
//input 需要过滤的元素
//char位置,索引减一
return function (input, char) {
if (isNaN(input)) {
//如果序号位置没有设置,索引位置默认是0
var char = char - 1 || 0;
//把过滤元素索引位置上的字母转换成大写
var letter = input.charAt(char).toUpperCase();
var out = [];
for (var i = 0; i < input.length; i++) {
if (i == char) {
out.push(letter);
} else {
out.push(input[i]);
}
}
return out.join('');
} else {
return input;
}
}
}); 

粗粗如此使用:

{{‘seven’ | capitalize:3}}

过滤群集

过滤出集结中级知识分子足某种条件的因素。

var app = angular.module('filters', []);
app.controller('demo', function ($scope) {
$scope.languages = [
{name: 'C#', type: 'static'},
{name: 'PHP', type: 'dynamic'},
{name: 'Go', type: 'static'},
{name: 'JavaScript', type: 'dynamic'},
{name: 'Rust', type: 'static'}
];
});
//过滤集合
app.filter('staticLanguage', function () {
return function (input) {
var out = [];
angular.forEach(input, function (language) {
if (language.type === 'static') {
out.push(language);
}
});
return out;
}
}); 

粗粗如此使用:

<li ng-repeat="lang in languages | staticLanguage">{{lang.name}}</li>

过滤,带多少个参数,做多件事

概念数字的展现单位和展现地方。

var app = angular.module('filters', []);
app.controller('demo', function ($scope) {
$scope.digit = 29.88;
});
//过滤 做多件事 多个参赛
app.filter('customCurrency', function () {
return function (input, symbol, place) {
if (isNaN(input)) {
return input;
} else {
//检查symbol是否有实参
var symbol = symbol || '¥';
var place = place === undefined ? true : place;
if(place===true){
return symbol+input;
}else{
return input + symbol;
}
}
}
}); 

大致这么使用:

<p><strong>Original:</strong></p>
<ul><li>{{digit}}</li></ul>
<p><strong>Custom Currency Filter</strong></p>
<ul>
<li>{{digit | customCurrency}} --Default</li>
<li>{{digit | customCurrency:'元'}} --custom symbol</li>
<li>{{digit | customCurrency:'元':false}} -- custom symbol and custom location</li>
</ul>

filter的二种选拔形式

1. 在模板中利用filter

我们得以一贯在{{}}中动用filter,跟在表明式前边用 | 分割,语法如下:

{{ expression | filter }}

也足以三个filter连用,上贰个filter的输出将用作下三个filter的输入(怪不得那货长的跟管道贰个样。。)

{{ expression | filter1 | filter2 | ... }}

filter可以吸取参数,参数用 : 实行剪切,如下:

{{ expression | filter:argument1:argument2:... }}

除了那一个之外对{{}}中的数据开展格式化,大家还足以在命令中运用filter,举例先对数组array实行过滤管理,然后再循环输出:

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了。

{{ expression | filter1 | filter2 | ... }}

详解AngularJS中的filter过滤器用法,angularjsfilter

系统的读书了一下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增添一个module

angular.module('tanktest', []).filter('tankreplace', function() { 
  return function(input) { 
    return input.replace(/tank/, "=====") 
  }; 
}); 

2,app.js中加载这么些module

var phonecatApp = angular.module('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举办过滤管理,然后再循环输出:

  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中的过滤器filter用法完全分析
  • AngularJS过滤器filter用法总括
  • 详解AngularJS中$filter过滤器使用(自定义过滤器)
  • AngularJS
    ng-repeat数组有重复值的解决方法
  • Angularjs的ng-repeat中去除重复数据的秘技
  • AngularJS ng-repeat指令中央银行使track
    by子语句解决重复数据遍历错误难点
  • AngularJs验证重复密码的方法(三种)
  • AngularJS使用Filter自定义过滤器调控ng-repeat去除重复效能示例

你可能感兴趣的稿子:

  • 相对来讲深入分析AngularJS中的$http.post与jQuery.post的分化
  • Angularjs制作轻巧的路由功能demo
  • AngularJS基础知识笔记之过滤器
  • AngularJS的放到过滤器详解
  • AngularJS中的过滤器使用详解
  • 运用AngularJS创制自定义的过滤器的不二法门
  • angularjs顾客端达成收缩图片文件并上传实例

过滤器(filter)正如其名,功用正是接到叁个输入,通过有些准则实行拍卖,然后回来管理后的…

过滤 带参数

您只怕感兴趣的篇章:

  • 浅析AngularJS Filter用法
  • 详解AngularJS Filter(过滤器)用法

系统的读书了一下angularjs,开掘angularjs的多少理念根php的模块smarty很像,比方数据绑定,fi…

{{ expression | filter:argument1:argument2:... }}

过滤出集结中级知识分子足某种条件的元素。

  2. 在controller和service中使用filter   大家的js代码中也能够选用过滤器,格局便是大家熟知的重视注入,比如笔者要在controller中央银行使currency过滤器,只需将它注入到该controller中就能够,代码如下:

金沙糖果派对网站app,能够完毕同样的效果。好处是你能够方便使用分歧的filter了。

 
|这里的竖线是一种管道效率,假设对linux相比较熟识的话,这块的|根linux的管道功能,基本是一样的
2,json格式化

过滤群集

2,app.js中加载那么些module

app.controller('testC',function($scope,currencyFilter){
$scope.num = currencyFilter(123534); 
}
{{ "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"}] 

那儿您只怕会有狐疑,假如作者要在controller中使用八个filter,难道要二个一个注入吗,那岂不太为难了?小家伙莫发急~ng提供了三个$filter服务能够来调用所需的filter,你只需注入一个$filter就够了,使用办法如下:

留心:| lowercase |tankreplace管道命令能够有五个

{{777 | ordinal}}

app.controller('testC',function($scope,$filter){
  $scope.num = $filter('currency')(123534);
  $scope.date = $filter('date')(new Date()); 
}

AngularJS中为我们提供了一些内置的过滤器,这里列举部分自定义过滤器的气象。

{{ "lower cap string" | uppercase }}   //结果:LOWER CAP STRING 
{{ "TANK is GOOD" | lowercase }}     //结果:tank is good
{{ expression | filter:argument1:argument2:... }}
{{ expression | filter }}
admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注