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