angularjs input指令

最新推荐文章于 2020-12-01 14:35:03 发布

weixin_30872867

最新推荐文章于 2020-12-01 14:35:03 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/leo666/p/5665723.html

本文详细介绍了Angular中各种表单控件的使用方法及注意事项，包括文本输入框、复选框、单选按钮等，并提供了丰富的示例代码。

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="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'); } });