【Angularjs文檔翻譯及實例】表單指令集（input）

reclay 發布于2019-08-19 17:43 / 1073人閱讀

摘要：設置了屬性，清空一下內容查看效果設置了屬性，增加內容查看效果運行效果以及用法其中以及請參照的參數列表，下面，僅列出與上個控件不同的參數。

最近在看Angular的知識，無論是書中還是網上，講解跟表單有關的指令集都是點到為止，講些基礎驗證，比如，是否為空，是否為email地址，更多的并沒有講解，但是，當我查看Angular的官方文檔時，發現與input控件相關的指令集真的很豐富，有關HTML5新增的控件也有很多，所以，我試著將input相關的指令集部分的英文文檔再加上自己的理解翻譯了一下，如果有不當的地方還希望各位看觀指正。

Angular真的很強大，強大的讓人眼前一亮。

約定

參數名會使用駝峰式書寫。例如ngShow，此參數用在控件的屬性時，屬性名為：ng-show。以此為約定。

input

用法

...

參數說明

參數	類型	詳情
ngModel	string	改選參數，用于數據綁定
name(optional)	string	控件自定義名稱，運行期間可使用些名稱控制控件
required(optional)	string	如果添加此屬性，并且內容為空，則設置$error.required為true
ngRequired(optional)	boolean	如果必填，則此屬性設置為true
ngMinlength(optional)	number	如果輸入的長度小于此值，就會設置$error.min為true
ngMaxlength(optional)	number	如果輸入的長度大于此值，就會設置$error.max為true。如果此值設置為負數或者非數值，則表示可輸入任意長度。
ngPattern(optional)	string	如果此屬性中的表達式不能匹配輸入的值，就會設置$error.pattern為true。如果表達式為RegExp對象，那么就會直接使用。如果表達式是一個字符串，那么Angular會在字符串外層增加^和$。比如，"abc"將會轉換為new RegExp("^abc&")。
ngChange(optional)	string	onChange事件綁定
ngTrim(optional)	boolean	如果為false，不會修剪輸入。如果輸入框的類型為password，此屬性無作用。默認是true

小貼士：記得，在使用$error時，要使用控件的name值作為變量，不應該使用ngModel值作為變量。

下面的代碼分別演示了required和ngMinlength屬性的用法，以及$error的實際應用。

請注意ngShow中的內容，使用的變量全部是name屬性的值。


    
        input1 is empty.
        input2 is must longer than 5
        
            input1:(設置了required屬性，清空一下內容查看效果)
            
        
        
            input2:(設置了ngMinlength屬性，增加內容查看效果)
            
        
        form.txt1.$error.required:{{form.txt1.$error.required}}
        

        form.txt2.$error.minlength:{{form.txt2.$error.minlength}}

var app = angular.module("myapp", []);

app.controller("inputCtrl", function($scope) {
    $scope.input1 = "required";
    $scope.input2 = "min";
});

運行效果：https://jsfiddle.net/Lionney/my2ht8fx/

input[checkbox]、input[date]以及input[datetime-local]

input[checkbox]用法

其中ngMode、name以及ngChange請參照input的參數列表，下面，僅列出與上個控件不同的參數。

參數說明

參數	類型	詳情
ngTrueValue(optional)	expression	當選擇框為選中狀態時，則返回此屬性中的值。此屬性內容默認為表達式，所以，如果是字符型數據，則要在外面使用"包含起來。比如：ng-true-value=""abc"",否則會按表達式處理。
ngFalseValue(optional)	expression	當選擇框為未選中狀態時，則返回此屬性中值。其余同上。

input[date]用法

其中ngMode、name、required、ngRequired以及ngChange請參照input的參數列表，下面，僅列出與input控件不同的參數。

參數說明

參數	類型	詳情
min(optional)	string	日期選擇器是HTML5中新加的表單控件類型，此屬性是為了設置控件最小可選擇的日期。這個屬性必須使用ISO日期字符串（yyyy-MM-dd）格式。當然，也可以插入變量（詳見注釋1）。如果不符合此屬性設置的最小值，則會設置$error.min為true。
max(optional)	string	此屬性為設置日期控制所能選擇的最大日期。其它與上一參數相同。如果不符合此屬性設置的最小值，則會設置$error.max為true。
ngMin(optional)	datestring	此為angular的屬性，設置后，不會影響控件的最小可選擇日期，如果用戶選擇填寫的與屬性不符，則會設置$error.min為true。屬性設置方法與min參數相同
ngMax(optional)	datestring	此為angular的屬性，設置后，不會影響控件的最大可選擇日期，如果用戶選擇填寫的與屬性不符，則會設置$error.max為true。屬性設置方法與max參數相同

注釋1：min="{{minDate | date:"yyyy-MM-dd"}}"

input[datetime-local]用法

此控件與date控件一樣，只是在設置min、max、ngMin、ngMax屬性時，內容有所不同，因為此控件是選擇日期及時間，所以設置的時候要加上時間，格式依然要使用ISO規定的日期時間格式（yyyy-MM-ddTHH:mm:ss），當使用日期過濾器時，格式化為："{{maxDatetimeLocal | date:"yyyy-MM-ddTHH:mm:ss"}}"

其它的參數說明與date是一樣，可以參照date參數說明。

下面實例為使用了以上控件的綜合實例，代碼如下：


    
        選擇1
        

        選擇2
        

        
        min validate error.
        

        
        min validate error.
        

        ck={{ck1}}
        

        ck={{ck2}}
        

        dd={{dd}}
        

        dl={{dl}}

var app = angular.module("checkbox", []);

app.controller("ckCtrl", function($scope) {
    $scope.ck1 = true;
    $scope.ck2 = 7
    $scope.dd = new Date("2017-01-01");
    $scope.dl = new Date("2017-01-01 08:08:00");
});

程序說明

當使用$error時，必須同時設置控件的name與ngModel屬性，使用name屬性值做為變量，否則，程序將達不到驗證效果。驗證的提示信息也必須放在form表單中，見代碼中帶有ngShow部分內容。

checkbox的初始化有兩種方式，第一種即此代碼中所展示的ck1。如果沒有設置ngTureValue/ngFalseValue的話，可以直接賦值true/false。第二種為此代碼中所展示的ck2。如果設置了ngTureValue/ngFalseValue，那么要使用ngTureValue/ngFalseValue中的值來初始化選擇框狀態。

運行效果https://jsfiddle.net/Lionney/snojqoqy/

GPU云服務器云服務器指令集 python 指令集 form表單提交input 云服務器指令集

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

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

【Angularjs文檔翻譯及實例】DOM事件

摘要：把當中涉及事件的屬性整理一下，此文檔是基于英文文檔整理的。約定此文中表示屬性名。用法參數參數類型詳情提交表單時，表達式被觸發事件對象與一樣可獲得綜合實例代碼代碼地址如有問題，請指正。把Angularjs當中涉及DOM事件的屬性整理一下，此文檔是基于1.4.8英文文檔整理的。約定：此文中ngXxx表示ng-xxx屬性名。 ngBlur 用法 ... 參數參數類型詳情 ...

awesome23 2019-08-19 17:44 評論0 收藏0
AngularJs功能（六）--指令

摘要：事件只針對輸入框值的真實修改，而不是通過來修改。指令將給定表達式的值替換元素的內容。指令還有另外一種轉換方式，如果你有字符串數組希望在輸入框中顯示，你可以在上使用指令。指令 Directive 指令系統（Directive）是Angular應用的一個重要特性。是通過對DOM元素的標簽丶屬性來增強HTML表現力，為其增加一些特定功能。本篇參考文檔Angular菜鳥教程內置指令這里...

Mertens 2019-08-22 13:59 評論0 收藏0
總結的AngularJS1版本的一些面試問題

摘要：綜上所述兩者是出于不同的目的被創建的，解決的也是不同的問題。檢測模型變化的過程稱為循環。由指令注冊的事件處理函數執行。該回調函數會更新插值表達式所在的屬性。模塊主要關系腳本加載問題。 AngularJS面試題 1.與jQuery的比較 jQuery js函數庫封裝簡化dom操作使用jquery的思想是：我擁有一個DOM元素并且想讓它去做某件事。也就是命令式編程思想。 angula...

defcon 2019-08-21 16:18 評論0 收藏0
AngularJS表單驗證

摘要：表單和其中的表單控件提供了驗證服務，可以讓用戶在提交一般在點擊類型為的按鈕時提交表單前意識到自己有非法不符合要求，以下都將稱為非法的輸入。為了編寫一個可靠的應用程序，服務端驗證是不可或缺的。促發條件至于自定義表單驗證，我會另寫一篇。表單網頁中用戶于服務端交互數據的表單控件有input、select、textarea，而表單是將為了達到一個目的（登錄、注冊等）各種控件整合到一起的一個...

moven_j 2019-08-19 18:27 評論0 收藏0