Angular學習筆記($filter)

taowen 發布于2019-08-21 10:41 / 1264人閱讀

摘要：權威教程里面對過濾器的優化提出了種途徑一避免在視圖中使用過濾器，盡可能在過濾邏輯移至控制器或服務中二緩存過濾器的執行結果參考資料過濾器過濾器權威指南

AngularJS 里面的過濾器就是一個函數，它的作用就是將輸入的數據經過格式化后再輸出給user

Angular內置指令 在HTML的模板中使用 | 符號來調用過濾器。

//大寫
{{ "hello" | uppercase }}   // HELLO

//將一個json或js的對象轉化成字符串
{{ {name: "xl", age: 23} | json }}  // {"name": "xl", "age": 23}

//將數字格式轉化成文本
{{ 123456789 | number }}  // 123,456,789

//limitTo過濾器會根據傳入的數字來返回新的數組或者字符串
{{"This is sunny day" | limitTo: 4}}  // "This"
{{["This", "is", "sunny", "day"] | limitTo: 1 }}   // ["This"]

//date格式化日期
var time = (new Date()).valueOf();
{{ time | date }}   // Oct 3, 2015

在Controller里面調用內置過濾器$filter

    var app = angular.module("app", []);
    app.controller("MainContainer", function($scope, $filter){
        var time = (new Date()).valueOf();
        $filter(date)(time, "yyyy-MM-dd");
        var string = "Hello world";
        $filter("uppercase")(string);
    })
    
    //$filter(date)(time, "yyyy-MM-dd") 第一個括號里面的參數代表調用哪個內置過濾器，第二個括號里面的參數代表向過濾器中傳入的參數，第一個是參數是需要被格式化的數據，第二個參數代表格式。

Angular自定義指令

    var app = angular.module("app", []);
    app.controller("mainCtrl", function($scope){
        
    });
    app.filter("slice", function(){
        return function(input){
            return input.slice(2);
        }
    });
    
    
    index.html 
    {{ "Hello" | slice }}  // "llo"

向指令里傳遞參數

使用 : 來隔開每個參數

    var app = angular.module("app", []);
    app.controller("mainCtrl", function(){
    
    });
    
    app.filter("addString", function(){
        return function(input, stringOne, stringTwo){
            return input + " " + stringOne + " " + stringTwo;
        }
    })
    
    index.html
    
    {{ "Hello" | addString:"world":"!!!" }} 
    // "Hello world !!!"

過濾器優化

位于視圖中的每個過濾器至少被調用2次，這是過濾器的本質。因此越是保持這些函數輕量及對它們進行優化，應用程序就會更快。

《Angular權威教程》里面對過濾器的優化提出了2種途徑

一. 避免在視圖中使用過濾器，盡可能在過濾邏輯移至控制器或服務中
二. 緩存過濾器的執行結果

參考資料：
Angular過濾器
Angular過濾器
AngularJS權威指南 1.2.x

云服務器 GPU云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86020.html

angular2.0 筆記 - 01

angular2.0 學習筆記 ### 1.angular-cli 常用命令記錄詳細教程 angular cli官網有，這里不詳細說明,感興趣的可以自行到官網看，一下僅記錄本人到學習過程常用到的命令 1.創建項目 ng new ng new project-name exp: ng new my-app 2.啟動項目 ng serve 參數名類型默認值作用 exp ...

AnthonyHan 2019-08-23 16:48 評論0 收藏0
AngularJS學習筆記(1) --- 執行過程

摘要：前言由于在博客系統的開發中和近期工作中的前端框架主要使用因此在這里記錄學習和使用的過程中遇到的一些需要記錄的點。執行過程弄清楚的執行過程是很重要的，這樣你才能在正確的時機做正確的事。至此，的執行過程也就告一段落了。前言由于在博客系統的開發中和近期工作中的前端框架主要使用 AngularJS ,因此在這里記錄學習和使用 AngularJS 的過程中遇到的一些需要記錄的點。特別說明，本...

taohonghui 2019-08-20 14:06 評論0 收藏0
Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

baoxl 2019-08-30 13:47 評論0 收藏0
Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

liukai90 2019-08-21 17:05 評論0 收藏0
Vue學習筆記（一）

摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點：是一個構建用戶界面的框架是一...

rollback 2019-08-01 17:49 評論0 收藏0