淺談AngularJS的$filter服務和建立AngularJS的filter 1

時間 2019-11-21

標籤淺談 angularjs filter 服務建立欄目 AngularJS 简体版

原文原文鏈接

仍是老習慣咱們先來看看官方關於$filter服務的文檔javascript

$filter
- 過濾器是用來格式化數據而後將這些數據展現給用戶的
- 在html模板中使用的方法以下：
  - {{expression [ | filter_name[:parameter_value] ... ]}}
- 使用
  - $filter(filterName)
  - 參數 - filterName[string]:過濾器的名字
  - 返回值- 一個過濾器函數
官方用例以下：
html代碼：

html<div ng-controller="MainCtrl">
 <h3>{{ originalText }}</h3>
 <h3>{{ filteredText }}</h3>
</div>

JS代碼：html

javascriptangular.module('filterExample', [])
.controller('MainCtrl', function($scope, $filter) {
  $scope.originalText = 'hello';
  $scope.filteredText = $filter('uppercase')($scope.originalText);
});

結果能夠看這裏jsfiddle代碼java

看了上面的代碼，咱們也就掌握了$filter的基本使用方法，下來咱們要建立本身的filter
這纔是真正好玩的事情^_^express

T1:首先咱們來建立咱們的第一個filter數組

功能：咱們在一個輸入框中輸入一段字符串，若是這段字符串能夠轉換爲數字的話；
那麼咱們就在這段字符串的後面加上一句話" is a number",不然在字符串後面加上" is not a number "
html代碼以下：

html<div ng-app="MyApp">
    <div ng-controller="MyController">
        <input ng-model="beforeFilter" type="text">
        <div ng-bind="afterFilter"></div>
    </div>
</div>

JS代碼以下：app

javascriptangular.module("MyApp", [])
    // D1
    .filter("MyFilter", function () { 
    // D2
    return function (beforeFilter) {
        if (isNaN(beforeFilter)) {
            return beforeFilter + " is not a number ";
        } else {
            return beforeFilter + " is a number ";
        }
    }
})
    .controller("MyController", function ($scope, $filter) {
    // D3
    $scope.$watch("beforeFilter", function (newVal) {
        $scope.afterFilter = $filter("MyFilter")(newVal);
    })
});

結果能夠看這裏T1-jsfiddle代碼
關於上面代碼的解釋：函數

D1部分使用filter建立了一個名字叫MyFilter的過濾器，注意，Myfilter後面的回調函數必須返回一個函數，咱們在這個函數中寫關於數據格式化的代碼。
D2部分，咱們給返還的函數中傳遞了一個參數，這個參數就表示過濾器將要處理的原來的數據，而後咱們對其進行一頓操做，對傳遞進來的參數咱們判斷它是否能夠轉換成一個數字，而後再做相應的操做。
D3部分咱們仍是用了$watch對咱們要檢測的表達式進行檢測，一旦咱們監測的表達式發生變化，咱們就對其進行過濾操做。

T2:在這部分中咱們將創造一個可使用參數的過濾器，有沒有一點興奮呢？.net

功能：咱們在一個輸入框中輸入一段字符串，而後將這段字符串中咱們想要的特定位置的那個字符大寫
html代碼以下：

html<div ng-app="MyApp">
    <div ng-controller="MyController">
        <input ng-model="beforeFilter" type="text">
        <div ng-bind="afterFilter"></div>
        // H1
        <div>{{"hello" | nUpperFilter:1}}</div>
    </div>
</div>

JS代碼以下：code

javascriptangular.module("MyApp", [])
.filter("nUpperFilter",function(){
    // D1
    return function(input, n){
        if(isNaN(input)){
            var output = [];
            var index = n - 1 || 0;
            var indexChar =  input[index].toUpperCase();
            for(var i = 0; i < input.length; i++){
                if(index == i){
                    output.push(indexChar);
                }
                else{
                    output.push(input[i]);
                }
            }
            // D2
            return output.join('');
        }
        else{
            return input;
        }
    }
})
    .controller("MyController", function ($scope, $filter) {
    $scope.$watch("beforeFilter", function (newVal) {
        $scope.console = newVal;
        // D3
        $scope.afterFilter = $filter("nUpperFilter")(newVal,2);
    })
});

結果能夠看這裏T2-jsfiddle代碼
下面是關於上面代碼的一些解釋：htm