成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Angular學(xué)習(xí)筆記($filter)

taowen / 1272人閱讀

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

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

Angular內(nèi)置指令 在HTML的模板中使用 | 符號(hào)來(lái)調(diào)用過(guò)濾器。 
//大寫(xiě)
{{ "hello" | uppercase }}   // HELLO

//將一個(gè)json或js的對(duì)象轉(zhuǎn)化成字符串
{{ {name: "xl", age: 23} | json }}  // {"name": "xl", "age": 23}

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

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

使用 : 來(lái)隔開(kāi)每個(gè)參數(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 !!!"
過(guò)濾器優(yōu)化

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

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

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

參考資料：
Angular過(guò)濾器
Angular過(guò)濾器
AngularJS權(quán)威指南 1.2.x

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86020.html

相關(guān)文章

  • angular2.0 筆記 - 01

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

    AnthonyHan 評(píng)論0 收藏0

  • AngularJS學(xué)習(xí)筆記(1) --- 執(zhí)行過(guò)程

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

    taohonghui 評(píng)論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

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

    baoxl 評(píng)論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

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

    liukai90 評(píng)論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

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

    rollback 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<