angularjs學習筆記—指令input

時間 2019-11-10

標籤 angularjs 學習筆記指令 input 欄目 AngularJS 简体版

原文原文鏈接

input[text]

input通常和ngModel結合使用來實現雙向綁定，同時angular提供了不少表單校驗的指令html

required 必填
ngRequired 必填（ngRequired能夠控制是不是必填校驗）
ngMinlength 最小長度
ngMaxlength 最大長度
pattern 正則匹配
ngPattern 正則匹配
ngChange 內容改變時觸發

ngTrim 是否trim數據，默認trueui

#html
<div ng-controller="LearnCtrl">
    <input type="text"
           ng-model="username"
           required
           ng-required="true"
           ng-minlength="6"
           ng-maxlength="15"
           pattern="[0-9]{6,15}"
           ng-pattern="/^[0-9]{6,15}$/"
           ng-change="change()"
           ng-trim="false"
            />
</div>

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

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

});

當input有校驗屬性時，若是輸入的值不符合校驗條件，model會被更新成undefined。若是想正常更新model能夠經過ngModelOptions設置。url

版本：v1.3.9-local雙向綁定

input[checkbox]

當未設置ngTrueValue和ngFalseValue時，默認值是true和false。code

#html
<input type="checkbox" ng-model="check"/>
<p>{{check}}</p>

設置了這兩個值了，就能夠指定選中和未選中的model值。checkbox一樣也有ng-chage指令。htm

ngTrueValue和ngFalseValue的參數是表達式哦。ip

#html
<div ng-controller="LearnCtrl">
    <input type="checkbox"
           ng-model="check"
           ng-true-value="'YES'"
           ng-false-value="'N'+'O'"
           ng-change="change()"/>

    <p>{{check}}</p>        
</div>

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

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

input[radio]

單選按鈕input

value 選擇中時的值
ngValue 選擇中時的值（表達式）
ngchange model更新觸發

沒有required屬性，沒辦法作必填校驗，因此最好初始化的時候默認選中一個。io

#html
<div ng-controller="LearnCtrl">
    <input type="radio"
           ng-model="radio"
           ng-change="change()"
           value="value1"/>
    <input type="radio"
           ng-model="radio"
           ng-change="change()"
           ng-value="'value2'"/>

    <p>{{radio}}</p>
</div>

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

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

input[date]

H5新增的日期選擇器。function

required 必填
ngRequired 必填
min 最小日期
max 最大日期
ngChange model更新觸發

若是給date初始化值，model必定得是Date類型，不然會報錯。

#html
<div ng-controller="LearnCtrl">
    <input type="date"
           ng-model="date"
           min="2015-12-12"
           max="2015-12-22"
           rquired
           ng-required
           ng-change="change()"/>

    <p>{{date}}</p>
</div>

#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更新觸發

若是給month初始化值，model必定得是Date類型，不然會報錯。

#html
<div ng-controller="LearnCtrl">
    <input type="month"
           ng-model="month"
           required
           ng-required
           min="2015-01"
           max="2015-12"
           ng-change="change()"/>

    <p>{{month}}</p>
</div>

#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更新時觸發

若是給time初始化值，model必定得是Date類型，不然會報錯。

#html
<div ng-controller="LearnCtrl">
    <input type="time"
           required
           ng-required
           min="10:00:00"
           max="23:00:00"
           ng-model="time"
           ng-change="change()"/>

    <p>{{time}}</p>
</div>

#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 最小週數
max 最大週數
ngChange model更新觸發

若是給week初始化值，model必定得是Date類型，不然會報錯。

#html
<div ng-controller="LearnCtrl">
    <input type="week"
           ng-model="week"
           required
           ng-required
           min="2015-W12"
           max="2015-W20"
           ng-change="change()"/>

    <p>{{week}}</p>
</div>

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

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

input[number]

數字類型

required 必填
ngRequired 必填
min 最小值
max 最大值
ngMinlength 最小長度
ngMaxlength 最大長度
pattern 正則匹配
ngPattern 正則匹配
ngChange model更新觸發

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

#html
<div ng-controller="LearnCtrl">
    <input type="number"
           ng-model="number"
           required
           ng-required
           min="10"
           max="100"
           ng-minlength=2
           ng-maxlength="3"
           pattern="3[0-9]{1}"
           ng-pattern="/^3[0-9]{1}$/"
           ng-change="change()"/>

    <p>{{number}}</p>
</div>

#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更新觸發

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

#html
<div ng-controller="LearnCtrl">
    <input type="email"
           ng-model="email"
           required
           ng-required
           ng-minlength="10"
           ng-maxlength="20"
           pattern="1@123.com"
           ng-pattern="/^1@123.com$/"
           ng-change="change()"/>

    <p>{{email}}</p>
</div>

#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更新觸發

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

#html
<div ng-controller="LearnCtrl">
    <input type="url"
           ng-model="url"
           required
           ng-required
           ng-minlength="6"
           ng-maxlength="15"
           pattern="http://www.test.com"
           ng-pattern="/^http://www.test.com$/"
           ng-change="change()"/>

    <p>{{url}}</p>
</div>

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

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