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

reclay 發(fā)布于2019-08-19 17:43 / 1081人閱讀

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

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

Angular真的很強(qiáng)大，強(qiáng)大的讓人眼前一亮。

約定

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

input

用法

...

參數(shù)說明

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

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

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

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


    
        input1 is empty.
        input2 is must longer than 5
        
            input1:(設(shè)置了required屬性，清空一下內(nèi)容查看效果)
            
        
        
            input2:(設(shè)置了ngMinlength屬性，增加內(nèi)容查看效果)
            
        
        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";
});

運(yùn)行效果：https://jsfiddle.net/Lionney/my2ht8fx/

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

input[checkbox]用法

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

參數(shù)說明

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

input[date]用法

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

參數(shù)說明

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

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

input[datetime-local]用法

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

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

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


    
        選擇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");
});

程序說明

當(dāng)使用$error時，必須同時設(shè)置控件的name與ngModel屬性，使用name屬性值做為變量，否則，程序?qū)⑦_(dá)不到驗證效果。驗證的提示信息也必須放在form表單中，見代碼中帶有ngShow部分內(nèi)容。

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

運(yùn)行效果https://jsfiddle.net/Lionney/snojqoqy/

GPU云服務(wù)器云服務(wù)器指令集 python 指令集 form表單提交input 云服務(wù)器指令集

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

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

發(fā)表評論

登陸后可評論

0條評論

reclay

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow和opencv

閱讀 1747·2023-04-25 23:43
軟件測試中的《性能測試》

閱讀 926·2021-11-24 09:39
BREW SDK 九大功能之顯示和用戶界面

閱讀 725·2021-11-22 15:25
PowerDotNet平臺化軟件架構(gòu)設(shè)計與實現(xiàn)系列（04）：服務(wù)治理平臺

閱讀 1725·2021-11-22 12:08
Spring Cloud Gateway實戰(zhàn)之五：內(nèi)置filter

閱讀 1092·2021-11-18 10:07
微軟 GitHub 競爭對手 GitLab 宣布計劃在納斯達(dá)克上市

閱讀 2080·2021-09-23 11:22
云主機(jī)是什么意思-云主機(jī)是什么意思?為什么？

閱讀 3350·2021-09-22 15:23
VirtualBox免費(fèi)虛擬機(jī)軟件安裝教程支持跨平臺且中文版

閱讀 2503·2021-09-13 10:32

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

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

AngularJs功能（六）--指令

**總結(jié)的AngularJS1版本的一些面試問題**

AngularJS表單驗證

發(fā)表評論

0條評論

reclay

男|高級講師

TA的文章

tensorflow和opencv

軟件測試中的《性能測試》

BREW SDK 九大功能之顯示和用戶界面

PowerDotNet平臺化軟件架構(gòu)設(shè)計與實現(xiàn)系列（04）：服務(wù)治理平臺

Spring Cloud Gateway實戰(zhàn)之五：內(nèi)置filter

微軟 GitHub 競爭對手 GitLab 宣布計劃在納斯達(dá)克上市

云主機(jī)是什么意思-云主機(jī)是什么意思?為什么？

VirtualBox免費(fèi)虛擬機(jī)軟件安裝教程支持跨平臺且中文版

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！