angular學習筆記(十六) -- 過濾器(2)

詩&遠方發表於2014-05-21
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

 

相關文章