angular学习笔记(十六) -- 自定义过滤器
本篇主要介绍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
