标签：
一、过滤器扩展
1、过滤器的组合使用
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> var m1 = angular.module(‘myApp‘,[]); m1.controller(‘Aaa‘,[‘$scope‘,function($scope){ $scope.name = ‘hello‘; }]); </script> </head> <body> <div ng-controller="Aaa"> <p>{{ name | limitTo : 2 | uppercase }}</p> </div> </body> </html>
2、通过服务的方式在js中使用过滤器
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> var m1 = angular.module(‘myApp‘,[]); m1.controller(‘Aaa‘,[‘$scope‘,‘$filter‘,function($scope,$filter){ //$scope.name = $filter(‘uppercase‘)(‘hello‘); //对hello进行转大写的操作 //$scope.name = $filter(‘number‘)(‘1326554654‘); $scope.name = $filter(‘number‘)(‘1326554654.545485‘,4); //4表示设置保留的小数位 }]); </script> </head> <body> <div ng-controller="Aaa"> <p>{{ name }}</p> </div> </body> </html>
二、自定义过滤器
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> var m1 = angular.module(‘myApp‘,[]); //自定义过滤器 m1.filter(‘firstUpper‘,function(){ return function(str,num){ //console.log(num); //num没有什么用，但是可以找到这个num return str.charAt(0).toUpperCase() + str.substring(1); } }); m1.controller(‘Aaa‘,[‘$scope‘,‘$filter‘,function($scope,$filter){ $scope.name = $filter(‘firstUpper‘)(‘hello‘); }]); </script> </head> <body> <div ng-controller="Aaa"> <p>{{ name }}</p> <p>{{ name | firstUpper }}</p> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/LO-ME/p/4565042.html
