angularjs學(xué)習(xí)筆記—指令input

princekin 發(fā)布于2019-08-21 10:28 / 3396人閱讀

摘要：新增的日期選擇器。類型必填必填最小長度最大長度正則匹配正則匹配更新觸發(fā)即使沒有使用校驗屬性，只要數(shù)據(jù)不符合格式，就會被更新成。

input[text]

input一般和ngModel結(jié)合使用來實現(xiàn)雙向綁定，同時angular提供了很多表單校驗的指令

required 必填

ngRequired 必填（ngRequired可以控制是否是必填校驗）

ngMinlength 最小長度

ngMaxlength 最大長度

pattern 正則匹配

ngPattern 正則匹配

ngChange 內(nèi)容改變時觸發(fā)

ngTrim 是否trim數(shù)據(jù)，默認true

#html

    


#script
angular.module("learnModule", [])

.controller("LearnCtrl", function ($scope) {
    $scope.change = function () {
        alert("change");
    }

});

當input有校驗屬性時，如果輸入的值不符合校驗條件，model會被更新成undefined。如果想正常更新model可以通過ngModelOptions設(shè)置。

版本：v1.3.9-local

input[checkbox]

當未設(shè)置ngTrueValue和ngFalseValue時，默認值是true和false。

#html

{{check}}

設(shè)置了這兩個值了，就可以指定選中和未選中的model值。checkbox同樣也有ng-chage指令。

  ngTrueValue和ngFalseValue的參數(shù)是表達式哦。

#html

    

    {{check}}        


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.check = "YES";
            $scope.change = function () {
                alert("change");
            }
        });

input[radio]

單選按鈕

value 選擇中時的值

ngValue 選擇中時的值（表達式）

ngchange model更新觸發(fā)

沒有required屬性，沒辦法做必填校驗，所以最好初始化的時候默認選中一個。

#html

    
    

    {{radio}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.radio = "value2";
            $scope.change = function () {
                alert("change");
            }
        });

input[date]

H5新增的日期選擇器。

required 必填

ngRequired 必填

min 最小日期

max 最大日期

ngChange model更新觸發(fā)

如果給date初始化值，model一定得是Date類型，否則會報錯。

#html

    

    {{date}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.date = new Date("2015-12-12");
            $scope.change = function () {
                alert("change");
            }
        });

input[datetime-local]

日期時間選擇器
用法基本同input[date]，就是比date多了個時間選擇。

input[month]

月份選擇器，只能選擇年和月。

required 必填

ngRequired 必填

min 最小月份

max 最大月份

ngChange model更新觸發(fā)

如果給month初始化值，model一定得是Date類型，否則會報錯。

#html

    

    {{month}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.month = new Date("2015-05");
            $scope.change = function () {
                alert("change");
            }
        });

input[time]

時間選擇

required 必填

ngRequired 必填

min 最小時間

max 最大時間

ngChange model更新時觸發(fā)

如果給time初始化值，model一定得是Date類型，否則會報錯。

#html

    

    {{time}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.time = new Date("2015-12-12 20:00:00");
            $scope.change = function () {
                alert("change");
            }
        });

input[week]

周選擇

required 必填

ngRequired 必填

min 最小周數(shù)

max 最大周數(shù)

ngChange model更新觸發(fā)

如果給week初始化值，model一定得是Date類型，否則會報錯。

#html

    

    {{week}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.week = new Date("2015-01-12");
            $scope.change = function () {
                alert("change");
            }
        });

input[number]

數(shù)字類型

required 必填

ngRequired 必填

min 最小值

max 最大值

ngMinlength 最小長度

ngMaxlength 最大長度

pattern 正則匹配

ngPattern 正則匹配

ngChange model更新觸發(fā)

  即使沒有使用校驗屬性，只要數(shù)據(jù)不是Number類型，model就會被更新成undefined。

#html

    

    {{number}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.number = 35;
            $scope.change = function () {
                alert("change");
            }
        });

input[email]

郵箱類型

required 必填

ngRequired 必填

ngMinlength 最小長度

ngMaxlength 最大長度

pattern 正則匹配

ngPattern 正則匹配

ngChange model更新觸發(fā)

  即使沒有使用校驗屬性，只要數(shù)據(jù)不符合郵箱格式，model就會被更新成undefined。

#html

    

    {{email}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.email = "";
            $scope.change = function () {
                alert("change");
            }
        });

input[url]

url類型

required 必填

ngRequired 必填

ngMinlength 最小長度

ngMaxlength 最大長度

pattern 正則匹配

ngPattern 正則匹配

ngChange model更新觸發(fā)

  即使沒有使用校驗屬性，只要數(shù)據(jù)不符合url格式，model就會被更新成undefined。

#html

    

    {{url}}


#script
angular.module("learnModule", [])

        .controller("LearnCtrl", function ($scope) {
            $scope.url = "";
            $scope.change = function () {
                //alert("change");
            }
        });