Angular學習筆記($filter)

taowen 發(fā)布于2019-08-21 10:41 / 1323人閱讀

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

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

Angular內(nèi)置指令 在HTML的模板中使用 | 符號來調(diào)用過濾器。

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

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

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

//limitTo過濾器會根據(jù)傳入的數(shù)字來返回新的數(shù)組或者字符串
{{"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里面調(diào)用內(nèi)置過濾器$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") 第一個括號里面的參數(shù)代表調(diào)用哪個內(nèi)置過濾器，第二個括號里面的參數(shù)代表向過濾器中傳入的參數(shù)，第一個是參數(shù)是需要被格式化的數(shù)據(jù)，第二個參數(shù)代表格式。

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"

向指令里傳遞參數(shù)

使用 : 來隔開每個參數(shù)

    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 !!!"

過濾器優(yōu)化

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

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

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

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

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

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

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

angular2.0 筆記 - 01

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

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

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

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

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

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

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

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

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

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