Angular.Js中过滤器filter与自定义过滤器filter实例详解
程序员文章站
2024-01-29 23:57:10
本文主要给大家介绍了angular.js过滤器filter与自定义过滤器filter的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:
一、angularjs的f...
本文主要给大家介绍了angular.js过滤器filter与自定义过滤器filter的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:
一、angularjs的filter过滤器:
- uppercase|lowercase:大小写转换过滤
- json:json格式过滤
- date:日期格式过滤
- number:数字格式过滤
- currency:货币格式过滤
- filter:查找
- limitto:字符串对象截取
- orderby:对象排序
<!doctype html> <html lang="zh_cn"> <head> <meta charset="utf-8"> <title>angular基础</title> </head> <body> <div ng-app="myapp"> <!-- 向表达式添加过滤器:可以通过一个管道字符(|)和一个过滤器添加到表达式中--> <p>将字符串转换为大小写:</p> <div ng-controller="uppercasecontroller"> <p>姓名为 {{ person.lastname | uppercase }}</p> </div> <div ng-controller="lowercasecontroller"> <p>姓名为 {{ person.lastname | lowercase }}</p> </div> <p>货币过滤:</p> <div ng-controller="costcontroller"> 数量:<input type="number" ng-model="quantity"> 价格:<input type="number" ng-model="price"> <p>总价 = {{ (quantity * price) | currency }}</p> {{250 |currency:"rmb ¥"}} </div> <!-- 向指令添加过滤器:可以通过一个管道字符(|)和一个过滤器添加到指令中--> <p>按国家的字母顺序排序对象:</p> <div ng-controller="namescontroller"> <p>循环对象:</p> <ul> <li ng-repeat="x in names | orderby:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> <!--json格式过滤--> {{jsontext | json}} <br/> <!--date格式过滤--> <span>{{1288323623006 | date:'yyyy-mm-dd hh:mm:ss'}}</span><br/> <!--number格式过滤--> {{1.2345678 |number:1}}<br/> <!--字符串截取--> {{ "i love tank" | limitto:6 }}<br/> {{ "i love tank" | limitto:-6 }}<br/> <!--对象排序:降序--> {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderby:'id':true }}<br/> <!--对象排序:升序--> {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderby:'id' }} </div> <p>按输入的字母显示对象:</p> <div ng-controller="namesfiltercontroller"> <p>输入过滤:</p> <p><input type="text" ng-model="name"></p> <ul> <li ng-repeat="x in names | filter:name | orderby:'country':true"> {{ (x.name | uppercase) + ', ' + x.country }} </li> </ul> <p>name筛选:</p> <ul> <li ng-repeat="x in names | filter:{'name':name} | orderby:'country':true"> {{ (x.name | uppercase) + ', ' + x.country }} </li> </ul> {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{'name':'sunm'} }} </div> </div> <script src="angular.min.js"></script> <script type="application/javascript"> var myapp=angular.module('myapp',[]); myapp.controller('uppercasecontroller',function($scope){ $scope.person = { firstname: "john", lastname: "doe" }; }); myapp.controller('lowercasecontroller',function($scope){ $scope.person = { firstname: "john", lastname: "doe" }; }); myapp.controller('costcontroller',function($scope){ $scope.quantity = 1; $scope.price = 9.99; }); myapp.controller('namescontroller',function($scope){ $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){ $scope.names = [ {name:'jani',country:'norway'}, {name:'hege',country:'sweden'}, {name:'kai',country:'denmark'} ]; }); </script> </body> </html>
二、angularjs的控制器使用filter
<!doctype html> <html lang="zh_cn"> <head> <meta charset="utf-8"> <title>angular基础</title> </head> <body> <div ng-app="myapp"> <div ng-controller="firstctrl"> {{ufirstname}}<br/> {{cprice}}<br/> </div> </div> <script src="angular.min.js"></script> <script type="application/javascript"> var myapp=angular.module('myapp',[]); myapp.controller('firstctrl',function($scope,$filter){ $scope.firstname="zhangsan"; $scope.ufirstname=$filter('uppercase')($scope.firstname); $scope.price="121212"; $scope.cprice=$filter('currency')($scope.price,'rmb ¥'); }) </script> </body> </html>
三、angularjs自定义filter过滤器
<!doctype html> <html lang="zh_cn"> <head> <meta charset="utf-8"> <title>angular基础</title> </head> <body> <div ng-app="myapp"> <div ng-controller="firstctrl"> {{welcome | replacehello}}<br/> {{welcome | replacehello:3:5}}<br/> {{welcome | rjs}}<br/> </div> </div> <script src="angular.min.js"></script> <script src="filter.js"></script> <script type="application/javascript"> var myapp=angular.module('myapp',['myapp.filter']); myapp.controller('firstctrl',function($scope){ $scope.welcome="hello angularjs"; }); //自定义过滤器 myapp.filter('replacehello',function(){ return function(input,n1,n2){ console.log(input); console.log(n1); console.log(n2); return input.replace(/hello/,'您好'); } }) </script> </body> </html>
var appfilter=angular.module('myapp.filter',[]); //自定义过滤器 appfilter.filter('rjs',function(){ return function(input,n1,n2){ console.log(input); console.log(n1); console.log(n2); return input.replace(/js/,' javascript'); } });
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
推荐阅读
-
AngularJS中过滤器的使用与自定义实例代码
-
vue 过滤器filter实例详解
-
详解AngularJS中的filter过滤器用法
-
vue的过滤器filter实例详解
-
详解AngularJS中的filter过滤器用法
-
AngularJS使用$watch与$filter过滤器制作数据筛选实例(代码教程)
-
JavaWeb Servlet中Filter过滤器的详解
-
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
-
详解AngularJS中$filter过滤器使用(自定义过滤器)
-
详解AngularJS中$filter过滤器使用(自定义过滤器)