如何在angularjs的自定義指令內部定義自定義過濾器?

今天下班碰到之前的小學妹,看她今天很是煩躁,我們就溝通了一下,原來是上學的時候沒有學好AngularJS,有很多不懂的問題,她問了我一個問題,就是怎麼使用自定義過濾器? 一聽到這個問題,我就有得說了,我就給她寫了個案例,基本的使用方法。


其實自定義的過濾器很強大,功能很多,所以我們公司一直有在使用,所以我們團隊的人都應該會對它挺了解的,今天就來說說怎麼去用它。


1、首先你要很清楚地知道 該用什麼去定義一個自定義過濾器?

app.filter(name, fn):用於定義一個自定義過濾器

其中 name:過濾器名稱   fn:過濾器處理函數


2 咱們就用一個案列來分析一下

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
    <div ng-bind="name"></div>
    <div ng-bind="name | myfilter"></div>
</div>
<script>
    var app = angular.module("myApp", []);
    app.filter("myfilter", function() {
        /*
         * 過濾器中,直接return function(value) {}
         * 通過閉包函數來實現數據處理,固定語法結構!
         * value參數:第一個參數,用於接收要處理的數據:數據就是過濾器管道符前面變量中的數據
         */
        return function(value) {/*閉包函數中的value就是過濾器接收到的數據|就是準備過濾的數據*/
            /*
             * 這一部分主要是用來進行數據處理的
             */
            value = value.toUpperCase();
            /* 過濾器中數據處理完成,一定要返回輸出*/
            return value;
        }
    });
    app.controller("myCtrl", function($scope) {
        $scope.name = "jerry";
    });
</script>

中間註釋部分都有解釋,應該就會一目瞭然,要記得最後一定要返回輸出


比較常見的就是運用自定義過濾器還原首字母大小寫,還有數組去重之類的,如果大家有需要,可以看看~


祝大家開心度過每一天~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章