angularjs—指令input

input[text]

input一般和ngModel結合使用來實現雙向繫結，同時angular提供了很多表單校驗的指令

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

ngTrim 是否trim資料，預設true

#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設定。

版本：v1.3.9-local

input[checkbox]

當未設定ngTrueValue和ngFalseValue時，預設值是true和false。

#html

<input type="checkbox" ng-model="check"/>

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

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

ngTrueValue和ngFalseValue的引數是表示式哦。

#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]

單選按鈕

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

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

#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新增的日期選擇器。

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="[email protected]"

           ng-pattern="/^[email protected]$/"

           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');

            }

        });

angularjs—指令input

angularjs—指令input

input[text]

input[checkbox]

input[radio]

input[date]

input[datetime-local]

input[month]

input[time]

input[week]

input[number]

input[email]

input[url]

最新文章