ctrl + hift + '+'加号
angularjs学习笔记—指令input
input[text]
input一般和ngModel结合使用来实现双向绑定，同时angular提供了很多表单校验的指令
•required 必填
•ngRequired 必填（ngRequired可以控制是否是必填校验）
•ngMinlength 最小长度
•ngMaxlength 最大长度
•pattern 正则匹配
•ngPattern 正则匹配
•ngChange 内容改变时触发
•ngTrim 是否trim数据，默认true
#html
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"
/>
#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
{{check}}
设置了这两个值了，就可以指定选中和未选中的model值。checkbox同样也有ng-chage指令。
ngTrueValue和ngFalseValue的参数是表达式哦。
#html
ng-model="check"
ng-true-value="'YES'"
ng-false-value="'N'+'O'"
ng-change="change()"/>
{{check}}
#script
angular.module('learnModule', [])
.controller('LearnCtrl', function ($scope) {
$scope.check = 'YES';
$scope.change = function () {
alert('change');
}
});
input[radio]
单选按钮
•value 选择中时的值
•ngValue 选择中时的值（表达式）
•ngchange model更新触发
没有required属性，没办法做必填校验，所以最好初始化的时候默认选中一个。
#html
ng-model="radio"
ng-change="change()"
value="value1"/>
ng-model="radio"
ng-change="change()"
ng-value="'value2'"/>
{{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更新触发
如果给date初始化值，model一定得是Date类型，否则会报错。
#html
ng-model="date"
min="2015-12-12"
max="2015-12-22"
rquired
ng-required
ng-change="change()"/>
{{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更新触发
如果给month初始化值，model一定得是Date类型，否则会报错。
#html
ng-model="month"
required
ng-required
min="2015-01"
max="2015-12"
ng-change="change()"/>
{{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更新时触发
如果给time初始化值，model一定得是Date类型，否则会报错。
#html
required
ng-required
min="10:00:00"
max="23:00:00"
ng-model="time"
ng-change="change()"/>
{{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 最小周数
•max 最大周数
•ngChange model更新触发
如果给week初始化值，model一定得是Date类型，否则会报错。
#html
ng-model="week"
required
ng-required
min="2015-W12"
max="2015-W20"
ng-change="change()"/>
{{week}}
#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
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()"/>
{{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更新触发
即使没有使用校验属性，只要数据不符合邮箱格式，model就会被更新成undefined。
#html
ng-model="email"
required
ng-required
ng-minlength="10"
ng-maxlength="20"
pattern="[email protected]"
ng-pattern="/^[email protected]$/"
ng-change="change()"/>
{{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更新触发
即使没有使用校验属性，只要数据不符合url格式，model就会被更新成undefined。
#html
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()"/>
{{url}}
#script
angular.module('learnModule', [])
.controller('LearnCtrl', function ($scope) {
$scope.url = '';
$scope.change = function () {
//alert('change');
}
});