angular学习笔记(十六) -- 过滤器(2)

本篇主要介绍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

 

你可能感兴趣的:(Angular)