angularjs 过滤器filter

      在前面介绍angularjs已经不少了,中途因为工做和一切生活杂事,暂停了好久。今天在这里将继续angularjs讲解,这节咱们来看看angularjs的过滤去filter。html

      在咱们开发中常常须要在页面显示给用户的信息须要必定处理格式化,才能显示给用户。好比时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等。在angularjs中为咱们提供了叫filter的指令,让咱们可以很轻易就能作到着一些列的功能,angularjs内部为咱们提供了number等不少内置的filter。而且咱们可以很轻易的自定义本身的领域filter。angularjs

      以下实例:shell

html:app

  
  
  
  
  1. <div ng-app="app" ng-controller="test"> 
  2. num:<input ng-model="num" /> 
  3. <br/> 
  4. {{num | number}}  
  5. <br/> 
  6. {{num | number:2}}  
  7. <br/> 
  8. first name:<input ng-model="person.first"/> 
  9. <br/> 
  10. last name:<input ng-model="person.last"/> 
  11. <br/> 
  12. name: {{person | fullname}}  
  13.     <br/> 
  14. name: {{person | fullname:"- -"}}  
  15.        <br/> 
  16. name: {{person | fullname:" " | uppercase }}  
  17. </div>​ 

js:ide

  
  
  
  
  1. function test($scope) {  
  2.  
  3. }  
  4. angular.module("app", []).controller("test", test).  
  5. filter("fullname"function() {  
  6.     var filterfun = function(person, sep) {  
  7.         sep = sep || " ";  
  8.         person = person || {};  
  9.         person.first = person.first || "";  
  10.         person.last = person.last || "";  
  11.         return person.first + sep + person.last;  
  12.     };  
  13.     return filterfun;  
  14. });​ 

jsfiddle效果:http://jsfiddle.net/whitewolf/uCPPK/12/spa

 

 

     在实例中首先演示了angularjs自带的number的filter使用。再一样为咱们样式了如何去建立一个angularjs的filter。其实现很简单.angularjs使得扩展一切变得天然操作系统

     最后说明:filters支持链式写法,如何powershell或者其余操做系统外壳语言同样的管道式模型,形如 value | filter1 | filter2。.net

相关文章
相关标签/搜索