本篇主要介绍angular自定义的过滤器:
直接看例子:
<!DOCTYPE html> <html ng-app="MyFilter"> <head> <title>13.2过滤器</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> <style type="text/css"> *{ font-family:'MICROSOFT YAHEI'; font-size:12px } </style> </head> <body> <div ng-controller="filter"> <span>{{title_1 | titleCase: 1 }}</span> <br> <span>{{title_2 | titleCase: 2 }}</span> </div> </body> </html>
var myFilter = angular.module('MyFilter',[]); myFilter.filter('titleCase',function(){ var titlecase = function(title,num){ var words = title.split(' '); for(var i=0; i<words.length; i++){ words[i] = words[i].charAt(0).toUpperCase() + words[i].substring(1) } return num+'. '+words.join(' ') }; return titlecase }); myFilter.controller('filter',function($scope){ $scope.title_1 = 'i am code bunny !'; $scope.title_2 = 'i am white bunny !' });
1. 首先要创建一个模块: MyFilter
2. 给模块添加一个过滤器: titleCase
创建过滤器的格式如下:
myFilter.filter('titleCase',function(){
var titlecase = function(title,num){
...
};
return titlecase
});
.filter的第一个参数为过滤器的名字,也就是在{{}}里面使用的名字,第二个参数是一个函数,函数需要再返回一个函数,被返回的函数,就是用来处理数据的函数,第一个参数就是需要被过滤的数据,后面的参数,就是在使用过滤器的时候,冒号后面传入的值. 比如这里的1:
<span>{{title_1 | titleCase: 1 }}</span>
3. 创建控制器: filter
4. 创建变量title_1,title_2