angularjs學習第二天筆記---過濾器

来源:https://www.cnblogs.com/xiaoXuZhi/archive/2018/08/21/angularjs_filter.html
-Advertisement-
Play Games

angularjs學習第二天筆記---過濾器。主要學習了過濾器的使用方式,以及內置過濾器之:貨幣過濾器(currency)、時間過濾器(date) ...


  

 您好,我是一名後端開發工程師,由於工作需要,現在系統的從0開始學習前端js框架之angular,每天把學習的一些心得分享出來,如果有什麼說的不對的地方,請多多指正,多多包涵我這個前端菜鳥,歡迎大家的點評與賜教。謝謝!

  第二天,幾天主要學angularjs中的過濾器

  一、簡介

  angular js 的過濾器簡單的理解就是格式化數據,當數據格式不滿足要求時不會報錯,直接展示空

  angularjs內置了一些常用的過濾器,當然也可以根據需要自定義過濾器     二、過濾器的使用方式有兩種:        1、在html中模板數據綁定內使用:       其使用方式是:在綁定模板中通過符號“|”來調用過濾器,格式為:{名稱|過濾器名稱}}
      如果有多個過濾器,那麼不同的過濾器間也同樣通過符號“|”相連接
      每一個過濾器還可以添加約束條件,約束條件通過符號“:”構成,多個約束條件同樣用“:”相連接。
      {名稱|過濾器1:約束條件1:約束條件2|過濾器2:約束條件....}}

    2、在js中通過$filter來調用:

      其使用格式為$filter("過濾器名稱:約束:約束|過濾器2:約束.....")             3、小練習
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body ng-app="myApp">
    <div ng-controller="myContro">
        <h1>angular js 之過濾器</h1>
        <div>angular js 的過濾器簡單的理解就是格式化數據,當數據格式不滿足要求時不會報錯,直接展示空<br />
         angularjs內置了一些常用的過濾器,當然也可以根據需要自定義過濾器
       </div>
        <div>
            過濾器的使用方式有兩種:<br />
            <h4>在html中模板數據綁定內使用:</h4><br />
            其使用方式是:在綁定模板中通過符號“|”來調用過濾器,格式為:{名稱|過濾器名稱}}<br />
            如果有多個過濾器,那麼不同的過濾器間也同樣通過符號“|”相連接<br />
            每一個過濾器還可以添加約束條件,約束條件通過符號“:”構成,多個約束條件同樣用“:”相連接。<br />
            {名稱|過濾器1:約束條件1:約束條件2|過濾器2:約束條件....}}

            <h4>在js中通過$filter來調用:</h4><br />
            其使用格式為$filter("過濾器名稱:約束:約束|過濾器2:約束.....")
        </div>
        <div>
            <h3>下麵通過一個大小寫轉換的例子來進行練習</h3>
            <h4>過濾器的兩種使用方式</h4>
            <div>賬號:<input type="text" ng-model="user.acount" placeholder="請輸入賬號信息..."/></div>
            <div>html模板中通過過濾器轉為大寫:{{user.acount|uppercase}}</div>
            <div>js代碼通過$filter調用轉化為小寫{{user.acountL}}</div>
            <h4>過濾器添加約束條件</h4>
            <div>體重:<input type="text" ng-model="user.weight" placeholder="請輸入體重,保留兩位有效數字"></div>
            <div>對體重添加數字過濾器,並且結果展示兩位小數:{{user.weight|number:2}}</div>
        </div>


    </div>
</body>
</html>
<script src="../Scripts/angular.js"></script>
<script type="text/javascript">
    var myApp = angular.module("myApp",[]);
    myApp.controller("myContro", function ($scope, $filter) {
        $scope.user = {
            acount:"",
            acountL:""
        }

        $scope.nowDate = new Date();

        ///// 對模型數據user.acount添加一個偵聽其改變
        $scope.$watch("user.acount", function (newvalue, oldvalue) {
            if (newvalue != oldvalue) {
                $scope.user.acountL = $filter("lowercase")($scope.user.acount)
            }
        });
    });
</script>

 

  三、內置過濾器

    1、貨幣過濾器,關鍵詞:currency

     貨幣過濾器的實現效果是,在被過濾的學習前加上貨幣符號,預設貨幣符號為,當然可以自定義貨幣符號

    2、時間過濾器,關鍵詞:date

     時間過濾器顧名思義就是格式化時間。
        時間格式的表達式和後端語言一直,簡單的羅列回顧幾個關鍵的表示方式
     yy:代表年份的最後兩位,如18
        yyyy:代表完整的4位年份
     MM:代表月份
       dd:代表日期
       hh:代表時間12小時制
       HH:代表時間24小時制
       mm:代表分鐘
       ss:代表秒
     有了上面的基礎,我們要對一個時間進行格式就可以根據需要自由組合了
                  比如我們要格式化為:xxxx年xx月xx日,其格式為:yyyy年MM月dd日
    

    3、針對以上兩個內置過濾器做一個小練習

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body ng-app="myApp">
    <div ng-controller="myContro">
        <h1>angular js 之過濾器</h1>
        <div>angular js 的過濾器簡單的理解就是格式化數據,當數據格式不滿足要求時不會報錯,直接展示空<br />
         angularjs內置了一些常用的過濾器,當然也可以根據需要自定義過濾器
       </div>
        <div style="margin-top:60px;">
            <h1>內置過濾器</h1>
            <h3>貨幣過濾器,關鍵詞:currency</h3>
            <div>貨幣過濾器的實現效果是,在被過濾的學習前加上貨幣符號,預設貨幣符號為,當然可以自定義貨幣符號</div>
            <div>
                金額:<input type="text" ng-model="user.price" placeholder="請輸入金額" />
                <div>預設貨幣展示結果:{{user.price|number:2|currency}}</div>
                <div>自定義貨幣展示結果:{{user.price|number:2|currency:'人民幣'}}</div>
            </div>

            <h3>時間過濾器,關鍵詞:date</h3>
            時間過濾器顧名思義就是格式化時間。<br />
            時間格式的表達式和後端語言一直,簡單的羅列回顧幾個關鍵的表示方式<br />
            yy:代表年份的最後兩位,如18<br />
            yyyy:代表完整的4位年份<br />
            MM:代表月份<br />
            dd:代表日期<br />
            hh:代表時間12小時制<br />
            HH:代表時間24小時制<br />
            mm:代表分鐘<br />
            ss:代表秒<br />
            有了上面的基礎,我們要對一個時間進行格式就可以根據需要自由組合了<br />
            比如我們要格式化為:xxxx年xx月xx日,其格式為:yyyy年MM月dd日
            <div>例如:格式顯示系統當前時間:{{nowDate|date:'yyyy-MM-dd HH:mm:ss'}}</div>
        </div>

    </div>
</body>
</html>
<script src="../Scripts/angular.js"></script>
<script type="text/javascript">
    var myApp = angular.module("myApp",[]);
    myApp.controller("myContro", function ($scope, $filter) {
    });
</script>

  好了,時間也不早了,明天還要上班,今天就先學到這,明天繼續學習其他內置過濾器,謝謝大家支持與鼓勵。

                 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 這是我之前項目遇到的問題,連接postgreSQL資料庫,一直找不到引擎,最後終於找到 原因了,需要程式載入 1、安裝postgresql客戶端,2、需要配置postgresql客戶端的bin和lib路徑 3、在程式裡面載入 1 QString QSdir = qApp->applicationDi ...
  • 1 建立備份數據表 CREATE TABLE [dbo].[ProcBackup]( [id] [int] IDENTITY(1,1) NOT NULL, [name] [sysname] NOT NULL, [db] [nvarchar](50) NULL, [obj_id] [int] NULL ...
  • 在這裡還是要推薦下我自己建的大數據學習交流群:119599574,群里都是學大數據開發的,如果你正在學習大數據 ,小編歡迎你加入,大家都是軟體開發黨,不定期分享乾貨(只有大數據軟體開發相關的),包括我自己整理的一份2018最新的大數據進階資料和高級開發教程,歡迎進階中和進想小伙伴加入。在這裡還是要推 ...
  • 原文出處:https://www.infoworld.com/article/3210905/sql/10-essential-performance-tips-for-mysql.html MySQL的10個基本性能技巧 與所有的關係資料庫一樣,MySQL正如一頭怪獸一般, 它可能會在接到通知的一 ...
  • MySQL連接方式MySQL除了最常見的TCP連接方式外,還提供SOCKET(LINUX預設連接方式)、PIPE和SHARED MEMORY連接方式。各連接方式的伺服器、客戶端啟動選項,及連接預設值見下表: TCP連接(Linux,Windows):目標 啟動選項 預設值SERVER --port= ...
  • MySQL的uuid這個函數。簡要介紹一下。 用法 簡單看到,這個值,每次執行都是不同的。 生成規則 第1 2 3 段是與時間有關的。 time_low、time_mid、time_high_and_version轉成16進位後分別對應第1 2 3段。這個時間是從1582-10-15 00:00:0 ...
  • 我對CSS選擇器的認識 一、簡述 CSS選擇器是對HTML元素進行選擇的篩選條件,大概可以分為兩類: 在真正使用的時候,幾個簡單的選擇器可以組合成更複雜的選擇器,所以誰也說不上CSS選擇器有多少。還有兩個選擇器是功能性的,它們可以給元素已有內容之前或之後添加新內容。 我做了一個項目,裡面包含一個測試 ...
  • TCP三次握手 客戶端與伺服器之間互相發送HTTP請求響應之前需要先進行TCP連接,因為HTTP是一個無連接、無狀態協議,不存在連接的概念,只有請求和響應的概念。而請求和響應實際上只是數據包,他們需要傳輸通道進行傳輸,而這個傳輸通道就是TCP創建的通道。那麼這個通道是如何創建的呢?就是通過TCP三次 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...