未分类

Angular.Js中过滤器filter与自定义过滤器filter实例详解_AngularJS_脚本之家

19 3月 , 2020  

本文主要给大家介绍了Angular.Js过滤器filter与自定义过滤器filter的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

三、AngularJs自定义filter过滤器

   Angular基础     {{uFirstName}}
 {{cPrice}}
     var myApp=angular.module; myApp.controller('firstCtrl',function{ $scope.firstName="zhangsan"; $scope.uFirstName=$filter; $scope.price="121212"; $scope.cPrice=$filter; })    

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

一、AngularJS的filter过滤器:

uppercase|lowercase:大小写转换过滤 json:json格式过滤 date:日期格式过滤
number:数字格式过滤 currency:货币格式过滤 filter:查找
limitTo:字符串对象截取 orderBy:对象排序

   Angular基础     将字符串转换为大小写:  姓名为 {{ person.lastName | uppercase }}   姓名为 {{ person.lastName | lowercase }}    数量: 价格: 总价 = {{  | currency }} {{250 |currency:"RMB ¥"}}   按国家的字母顺序排序对象:     {{ x.name + ', ' + x.country }}    {{jsonText | json}} 
  {{1288323623006 | date:'yyyy-MM-dd HH:mm:ss'}}
  {{1.2345678 |number:1}}
  {{ "i love tank" | limitTo:6 }}
 {{ "i love tank" | limitTo:-6 }}
  {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }}
  {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id' }}  按输入的字母显示对象:      {{  + ', ' + x.country }}      {{  + ', ' + x.country }}   {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{'name':'sunm'} }}     var myApp=angular.module; myApp.controller('uppercaseController',function{ $scope.person = { firstName: "John", lastName: "Doe" }; }); myApp.controller('lowercaseController',function{ $scope.person = { firstName: "John", lastName: "Doe" }; }); myApp.controller('costController',function{ $scope.quantity = 1; $scope.price = 9.99; }); myApp.controller('namesController',function{ $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ]; $scope.jsonText={foo:"bar",baz:23}; }); myApp.controller('namesFilterController',function{ $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ]; });    
   Angular基础     {{welcome | replaceHello}}
 {{welcome | replaceHello:3:5}}
 {{welcome | rJs}}
      var myApp=angular.module('myApp',['myApp.filter']); myApp.controller('firstCtrl',function{ $scope.welcome="Hello AngularJs"; }); //自定义过滤器 myApp.filter('replaceHello',function(){ return function{ console.log; console.log; return input.replace    

var appFilter=angular.module; //自定义过滤器 appFilter.filter{ return function{ console.log; console.log; return input.replace; } }); 

二、AngularJs的控制器使用filter


相关文章

发表评论

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

网站地图xml地图