angularjs 过滤器filter
导读：收集整理的这篇文章主要介绍了html5教程-angularjs 过滤器filter，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 在前面介绍An...
收集整理的这篇文章主要介绍了html5教程-angularjs 过滤器filter，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 在前面介绍Angularjs已经很多了，中途由于工作和一切生活琐事，暂停了很久。今天在这里将继续angularjs讲解，这节我们来看看angularjs的过滤去filter。在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。比如时间本地化，或者yyyy-MM-dd HH:mm:ss格式，数字精度格式化，本地化，人名格式化等等。在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能，angularjs内部为我们提供了number等很多内置的filter。并且我们能够很轻易的自定义自己的领域filter。
如下实例：
htML:
p ng-app="app" ng-controller="test">
num:input ng-model="num" />
br/>
{ { num | number} }
br/>
{ { num | number:2} }
br/>
First name:input ng-model="PErson.first"/>
br/>
last name:input ng-model="person.last"/>
br/>
name: { { person | fullname} }
br/>
name: { { person | fullname:"- -"} }
br/>
name: { { person | fullname:" " | uppercase } }
/p>
js:
function test($scope) {
}
angular.module("app", []).controller("test", test).
filter("fullname", function() {
VAR filterfun = function(person, sep) {
sep = sep || " ";
person = person || { } ;
person.first = person.first || "";
person.last = person.last || "";
return person.first + sep + person.last;
} ;
return filterfun;
} );
jsfiddle效果：https://jsfiddle.net/whITewolf/uCPPK/12/
在实例中首先演示了angularjs自带的number的filter使用。再同样为我们样式了如何去创建一个angularjs的filter。其实现很简单.angularjs使得扩展一切变得自然
最后说明：filters支持链式写法，如何powershell或者其他操作系统外壳语言一样的管道式模型，形如 value | filter1 | filter2。 在前面介绍angularjs已经很多了，中途由于工作和一切生活琐事，暂停了很久。今天在这里将继续angularjs讲解，这节我们来看看angularjs的过滤去filter。
在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。比如时间本地化，或者yyyy-MM-dd HH:mm:ss格式，数字精度格式化，本地化，人名格式化等等。在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能，angularjs内部为我们提供了number等很多内置的filter。并且我们能够很轻易的自定义自己的领域filter。
如下实例：
html:
p ng-app="app" ng-controller="test">
num:input ng-model="num" />
br/>
{ { num | number} }
br/>
{ { num | number:2} }
br/>
first name:input ng-model="person.first"/>
br/>
last name:input ng-model="person.last"/>
br/>
name: { { person | fullname} }
br/>
name: { { person | fullname:"- -"} }
br/>
name: { { person | fullname:" " | uppercase } }
/p>
js:
function test($scope) {
}
angular.module("app", []).controller("test", test).
filter("fullname", function() {
var filterfun = function(person, sep) {
sep = sep || " ";
person = person || { } ;
person.first = person.first || "";
person.last = person.last || "";
return person.first + sep + person.last;
} ;
return filterfun;
} );
jsfiddle效果：https://jsfiddle.net/whitewolf/uCPPK/12/
在实例中首先演示了angularjs自带的number的filter使用。再同样为我们样式了如何去创建一个angularjs的filter。其实现很简单.angularjs使得扩展一切变得自然
最后说明：filters支持链式写法，如何powershell或者其他操作系统外壳语言一样的管道式模型，形如 value | filter1 | filter2。
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： angularjs 过滤器filter
本文地址： https://pptw.com/jishu/586500.html