前端MVC學習筆記（二）——AngularJS驗證、過濾器、指令

来源:http://www.cnblogs.com/SeeYouBug/archive/2017/01/11/6272380.html
-Advertisement-
Play Games

一、驗證二、過濾器2.1、內置過濾器2.1.1、在模板中使用過濾器2.1.2、在腳本中調用過濾函數2.2、自定義過濾器三、指令（directive）3.1、支持AngularJS功能的指令3.1.1、應用與模塊（ng-app）3.1.2、控制器（ng-Controller）3.1.3、包含（ng-I... ...


一、驗證

angularJS中提供了許多的驗證指令，可以輕鬆的實現驗證，只需要在表單元素上添加相應的ng屬性，常見的如下所示：

<input Type="text" ng-model="" [name=""] [required=""] [ng-required=""] [ng-minlength=""] [ng-maxlength=""][ng-pattern=""][ng-change=""] [ng-trim=""]>

表單與表單元素都需要通過name引用，請註意設置name的值。獲得錯誤的詳細參數可以在示例中看到。

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的範圍-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>驗證</title>
    </head>

    <body>
        <!--指定控制器的作用範圍-->
        <form ng-controller="Controller1" name="form1">
            <p>
                <label for="username">帳號：</label>
                <input type="text" id="username" name="username" ng-model="username" ng-required="true" />
                <span ng-show="form1.username.$error.required">必填</span>
            </p>
            <p>
                <label for="username">密碼：</label>
                <input type="text" id="password" name="password" ng-model="password" ng-required="true" ng-pattern="/^[a-z]{6,8}$/" ng-trim="true"/>
                <span ng-show="form1.password.$error.required">必填</span>
                <span ng-show="form1.password.$error.pattern">只允許6-8位小寫字母</span>
            </p>
            <p>
                密碼的值：{{"["+password+"]"}}<br/>
                是否合法：form1.password.$valid={{form1.password.$valid}}<br/>
                是否非法：form1.password.$invalid={{form1.password.$invalid}}<br/>
                錯誤消息：form1.password.$error={{form1.password.$error}}<br/>
                是否修改：form1.password.$dirty={{form1.password.$dirty}}<br/>
                是否預設：form1.password.$pristine={{form1.password.$pristine}}<br/>
            </p>
            <p>
                表單信息：<br/>
                錯誤消息：form1.$error={{form1.$error}}<br/>
                是否合法：form1.$valid={{form1.$valid}}<br/>
                是否非法：form1.$invalid={{form1.$invalid}}<br/>
            </p>
            <p>
                <button ng-disabled="form1.$invalid">提交</button>
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定義模塊，指定依賴項為空
            var app01 = angular.module("app01", []);

            //定義控制器，指定控制器的名稱，$scope是全局對象
            app01.controller("Controller1", function($scope) {

            });
        </script>
    </body>

</html>

運行結果：

二、過濾器

使用過濾器格式化數據，變換數據格式，在模板中使用一個插值變數。語法格式如下：

{{ express | filter:parameter1:p2:p3… | … | …}}

過濾器分了內置過濾器與自定義過濾器，過濾器的調用方式也分了在模板中調用與在函數中調用。

2.1、內置過濾器

常見的內置過濾器有：

1)、currency(貨幣)

{{123.456 | currency:'￥'}}

2)、number(數字)

{{12.235| number:2}}

3)、uppercase , lowercase(大小寫)格式化

{{"Hello"| uppercase}}

4)、json(數據)格式化

{{userObject| json}}

5)、limitTo(截取)格式化，數量限制
{{"StringObject" | limitTo : 3}}

6)、date 日期格式化

{{name | date : 'yyyy-MM-dd hh:mm:ss'}}

'yyyy': 4位數字的年份(如AD 1 => 0001, AD 2010 => 2010)
'yy': 2位數字的年份，範圍為(00-99)。(如AD 2001 => 01, AD 2010 => 10)
'y': 1位數字的年份，例如 (AD 1 => 1, AD 199 => 199)
'MMMM': 月份 (January-December)
'MMM': 月份 (Jan-Dec)
'MM': 月份, padded (01-12)
'M': 月份 (1-12)
'dd': 日，範圍為(01-31)
'd': 日 (1-31)
'EEEE': 星期,(Sunday-Saturday)
'EEE': 星期, (Sun-Sat)
'HH': 小時, 範圍為(00-23)
'H': 小時 (0-23)
'hh': am/pm形式的小時, 範圍為(01-12)
'h': am/pm形式的小時, (1-12)
'mm': 分鐘,範圍為 (00-59)
'm': 分鐘 (0-59)
'ss': 秒, 範圍為 (00-59)
's': 秒 (0-59)
'.sss' or ',sss': 毫秒,範圍為 (000-999)
'a': am/pm 標記
'Z': 4 位數字的時區偏移(+符號)(-1200-+1200)
'ww': ISO-8601 年內的周數 (00-53)
'w': ISO-8601 年內的周數 (0-53)

format 字元串也可以是以下預定義的本地化格式之一:
'medium': 等於en_US本地化後的 'MMM d, y h:mm:ss a' (如：Sep 3, 2010 12:05:08 pm)
'short': 等於en_US本地化後的 'M/d/yy h:mm a' (如： 9/3/10 12:05 pm)
'fullDate': 等於en_US本地化後的 'EEEE, MMMM d, y' (如： Friday, September 3, 2010)
'longDate': 等於en_US本地化後的 'MMMM d, y' (如： September 3, 2010)
'mediumDate': 等於en_US本地化後的 'MMM d, y' (如： Sep 3, 2010)
'shortDate': 等於en_US本地化後的 'M/d/yy' (如： 9/3/10)
'mediumTime': 等於en_US本地化後的 'h:mm:ss a' (如： 12:05:08 pm)
'shortTime': 等於en_US本地化後的 'h:mm a' (如： 12:05 pm)
format 字元串可以包含固定值。這需要用單引號括起來 (如： "h 'in the morning'")。如果要輸出單引號，使序列中使用兩個單引號(如： "h 'o''clock'")。

7)、orderBy(排序)格式化

orderBy:'age':reverse
reverse是true表示降序、false表示升序

8)、filter(篩選&過濾)格式化

{{name | filter : 'l' | json}}

2.1.1、在模板中使用過濾器

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的範圍-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>過濾器</title>
    </head>

    <body>
        <!--指定控制器的作用範圍-->
        <form ng-controller="Controller1" name="form1">
            <p>
                貨幣：{{money}} ，{{money|currency}} ，{{money|currency:"￥"}}
            </p>
            <p>
                數字：{{money|number:1}} ，{{money | number:1 | currency:"$" }}
            </p>
            <p>
                大寫：{{message|uppercase}}
            </p>
            <p>
                小寫：{{message|lowercase}}
            </p>
            <p>
                json：{{user | json}}
            </p>
            <p>
                截取：{{message|limitTo:5|uppercase}}
            </p>
            <p>
                日期1：{{birthday|date:'yyyy年MM月dd日 HH:mm:ss'}}
            </p>
            <p>
                日期2：{{birthday|date:'fullDate'}}
            </p>
            <p>
                排序：{{users|orderBy:'age':true}}
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定義模塊，指定依賴項為空
            var app01 = angular.module("app01", []);

            //定義控制器，指定控制器的名稱，$scope是全局對象
            app01.controller("Controller1", function($scope) {
                $scope.money=1985.678;
                $scope.message="Hello AngularJS!"
                $scope.user={name:"rose",age:18};
                $scope.birthday=new Date();
                $scope.users=[{name:"rose",age:18},{name:"jack",age:19},{name:"tome",age:17}];
            });
        </script>
    </body>

</html>

運行結果：

2.1.2、在腳本中調用過濾函數

在函數中調用過濾器的方法是：在控制中添加對$filter的依賴，$filter("過濾函數名稱")(被過濾對象,'參數')

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的範圍-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>過濾器</title>
    </head>

    <body>
        <!--指定控制器的作用範圍-->
        <form ng-controller="Controller1" name="form1">
            {{money}}
            <hr/>
            {{moneyString}}
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定義模塊，指定依賴項為空
            var app01 = angular.module("app01", []);

            //定義控制器，指定控制器的名稱，$scope是全局對象
            app01.controller("Controller1", function($scope,$filter) {
                $scope.money=1985.897;
                //使用$filter服務查找currency函數，並調用
                $scope.moneyString=$filter("currency")($scope.money,'USD$');
            });
        </script>
    </body>

</html>

運行結果：

2.2、自定義過濾器

示例代碼：

<!DOCTYPE html>
<!--指定angular管理的範圍-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>過濾器</title>
    </head>

    <body>
        <!--指定控制器的作用範圍-->
        <form ng-controller="Controller1" name="form1">
            <p>
            {{"Hello AngularJS and NodeJS" | cutString:15:'...'}}
            </p>
            <p>
                {{longString}}
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定義模塊，指定依賴項為空
            var app01 = angular.module("app01", []);
            
            //向模塊中添加過濾
            //用於裁剪字元，超過長度則截取，添加...
            app01.filter("cutString",function(){
                return function(srcString,length,addString){
                    if(srcString.length<length){
                        return srcString;
                    }
                    return srcString.substring(0,length)+addString;
                }
            });

            //定義控制器，指定控制器的名稱，$scope是全局對象
            app01.controller("Controller1", function($scope,$filter) {
                $scope.longString=$filter("cutString")("Hello AngularJS and NodeJS",5,":):):)");
            });
        </script>
    </body>

</html>

運行結果：

練習1：

點擊價格與名稱可以進行排序，排序時顯示向上或向下的箭頭，在搜索框中可以輸入查詢條件過濾數據。驗證搜索框中的內容只能是字母與數字，不允許輸入其它類型的字元。

練習2：

請自定義一個過濾器實現敏感關鍵字過濾，在過濾器中可以準備一個敏感詞數組，將敏感詞替換成指定的符號，預設為*號。
{{"This is some bad,dark evil text" | censor:"bad,dark,evil":"happy"}}
顯示結果：
This is some happy,happy happy text

三、指令（directive）

指令(directive)是AngularJS模板標記和用於支持的JavaScript代碼的組合。AngularJS指令標記可以是HTML屬性、元素名稱或者CSS類，指令擴展了HTML的行為。指令可以分為：
a)、內置指令：支持AngularJS功能的指令、擴展表單元素的指令、把作用域綁定到頁面元素的指令
b)、自定義指令，增加與擴展出新的指令。

ng-app這樣的標記我們稱之為指令。模板通過指令指示AngularJS進行必要的操作。 比如：ng-app指令用來通知AngularJS自動引導應用；ez-clock 指令用來通知AngularJS生成指定的時鐘組件。

3.1、支持AngularJS功能的指令

3.1.1、應用與模塊（ng-app）

自動載入啟動一個AngularJS應用，聲明瞭ng-app的元素會成為$rootScope的起點
每個HTML文檔只有一個AngularJS應用能被自動載入啟動,文檔中找到的第一個ngApp將被用於定義自動載入啟動的應用的根元素。要在一個HTML文檔中運行多個應用，你必須使用angular.bootstrap來手工啟動。AngularJS應用間不能嵌套。

3.1.2、控制器（ng-Controller）

ngController指令給視圖添加一個控制器，控制器之間可以嵌套，內層控制器可以使用外層控制器的對象，但反過來不行。這是angular支持基於“視圖-模型-控制器”設計模式原則的主要方面。

Angular中的MVC組件有：
模型 — 模型是一個域的屬性集合；域被附加到DOM上，通過綁定來存取域屬性。
視圖 — 模板(進行數據綁定的HTML)會被呈現到視圖中。
控制器 — ngController指令聲明一個控制器類；該類包含了業務邏輯，在應用後臺使用函數和值來操控域中的屬性。
註意，你也能使用$route服務定義一個路由來將控制器附加到DOM上。一個常見錯誤是在模板上再次使用ng-controller定義一個控制器。這將引起控制器被附加和執行兩次。

3.1.3、包含（ng-Include）

獲取、編譯並引用一個外部HTML片段(也可以是內部的)

預設情況下，模板URL被強製為使用與應用文檔相同的功能變數名稱和協議。這是通過調用$sce.getTrustedResourceUrl 實現的。為了從其它的功能變數名稱和協議載入模板，你可以採用 白名單化 或 包裹化 任一手段來作為可信任值。參考 Angular的 強上下文轉義。
此外，瀏覽器的 同源策略 和 交叉源資源共用(CORS) 策略會進一步限制模板是否能成功載入。例如，ngInclude 在所有瀏覽器上不能進行交叉域請求，一些瀏覽不能訪問 file:// 等。

<ng-include src="" [onload=""] [autoscroll=""]></ng-include>
<ANY ng-include="" [onload=""] [autoscroll=""]></ANY>
<ANY class="ng-include: ; [onload: ;] [autoscroll: ;]"> </ANY>

外部包含：

外部包含是指包含一個獨立的外部文件。

包含時請註意中間頁面地址要加引號，需要的是一個字元，如果不加會認為是一個變數。

header.html

<header>
    <h2>歡迎光臨天狗商城</h2>
</header>

footer.html

<style>
    .cls1 {
        background: lightblue;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
</style>
<footer class="cls1">
    <h3>版本所有 違者必究</h3>
</footer>

d05.html

<!DOCTYPE html>
<!--指定angular管理的範圍-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用範圍-->
        <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
            <ng-include src="header"></ng-include>
            <ng-include src="'header.html'"></ng-include>
            <div ng-include="'footer.html'"></div>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定義模塊，指定依賴項為空
            var app01 = angular.module("app01", []);
            //定義控制器，指定控制器的名稱，$scope是全局對象
            app01.controller("Controller1", function($scope) {
            });
            function regTest()
            {
                var reg1=new RegExp("\d","igm");
                var reg2=/\d/igm;
                
                var str="This is some bad,dark evil text";
                str=str.replace(/bad|dark|evil/igm,"Happy");
                console.log(str);
                
                //取出Hello Hello
                var str="<input value='Hello'/><input value='World'/>";
                //將value中的內容前後增加一個*
            }
            regTest();
        </script>
    </body>

</html>

運行結果：

內部包含：

先定義模板，指定id與類型，模板中可以是任意片段：

<script id="p1" type="text/ng-template">

引用模板，模板中可以使用angular表達式，引用的方法與外部包含一樣。

 

<!DOCTYPE html>
<!--指定angular管理的範圍-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用範圍-->
        <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
            <ng-include src="header"></ng-include>
            <ng-include src="'header.html'"></ng-include>
            
            <script id="template1" type="text/ng-template">
                您想購買的商品是:{{product}}
            </script>
            
            <ng-include src="'template1'" onLoad="product='SD卡'"></ng-include>
            <ng-include src="'template1'" onLoad="product='TF卡'"></ng-include>
            
            <div ng-include="'footer.html'"></div>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JavaScript ：memory leak [轉]
    Memory leak patterns in JavaScript Handling circular references in JavaScript applications Abhijeet Bhattacharya and Kiran Shivarama SundarPublished o ...
  • jQuery核心結構簡單分析
    以下分析均採取沙箱模式 js (function (window) { //為了提高性能把需要的變數統一提前聲明 var arr = [], push = arr.push; //為區別jQuery，此文章以iQuery來定義封裝的函數 function iQuery( selector ) { r ...
  • echarts配合迴圈計時器等出現的記憶體泄漏
    echarts是百度的一個圖表插件，確實好用美觀。 之前實習接觸到的頁面大多是下麵這種調用方式 這次有一個頁面需要計時器反覆載入新數據，然後重繪echarts圖表。一開始我還是使用了上面這種方式，沒有發現太大問題。第二天早上來調試的時候，網頁運行了一段時間，我的電腦記憶體達到了56%，我是8G的記憶體， ...
  • 走了十八里山路 終於來到了博客園
    今天博客園註冊成功了，很是欣喜，趕緊在博客園留下我的足記。 半年前，我還是剛走出校園的一枚IT小白，對於IT行業什麼都不懂，我大學的專業是採礦工程，接觸過的編程語言只有VB，但說實話，那時候啥也不懂，考試嗎，相信大家也都知道，在考試前老師一般會畫原題，你死記硬背就行了，根本不用懂那行代碼什麼意思，只 ...
  • 將滑鼠焦點定位到文本框最後
    經測試，相容IE8 ...
  • div、span
    1.Html區塊元素 HTML可以通過<div>和<span>將元素組合起來 大多數HTML元素被定義為塊級元素或內聯元素， 而塊級元素在瀏覽器顯示時，通常會以新行來開始（或結束）。如：<h1>,<p>,<ul>,<table> 內聯元素在顯示時通常不會以新行開始。如：<b>,<td>,<a>,<i ...
  • Bootstrap實現彈出框和提示框效果代碼
    一、Bootstrap彈出框使用過JQuery UI應該知道，它裡面有一個dialog的彈出框組件，功能也很豐富。與jQuery UI的dialog類似，Bootstrap裡面也內置了彈出框組件。打開bootstrap 文檔可以看到它的dialog是直接嵌入到bootstrap.js和bootstr ...
  • canvas 彈幕效果
    Document 你的瀏覽器不支持canvas ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類