AngularJS中的input指令
来源:互联网 发布:淘宝手机网站模板 编辑:程序博客网 时间:2024/06/01 07:46
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span style="color:red"ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
<p>在输入框中输入你的邮箱地址,如果不是一个合法的邮箱地址,会弹出提示信息。</p>
</body>
</html>
自行判断你输入的值是否是email邮箱形式。
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>#scriptangular.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>#scriptangular.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>#scriptangular.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>#scriptangular.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>#scriptangular.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>#scriptangular.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>#scriptangular.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>#scriptangular.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>#scriptangular.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>#scriptangular.module('learnModule', []) .controller('LearnCtrl', function ($scope) { $scope.url = ''; $scope.change = function () { //alert('change'); } });
- AngularJS中的input指令
- AngularJS之input指令
- angularjs中的指令
- Angularjs中的自定义指令
- AngularJS中的指令
- angularjs学习笔记—指令input
- angularJS中input相关指令详解
- Angularjs中input的指令和属性
- angularjs input 表单校验指令整理
- AngularJS基础——事件指令及input相关指令
- angularjs指令中的compile详解
- angularJs中的ng-click指令
- angularJs中的ng-show指令
- (3)AngularJS 1.X 之和Input相关的指令
- 关于angularjs的指令中的scope
- angularjs指令定义中的require参数
- angularjs指令中的replace与transclude参数
- angularJs中的form指令的使用
- 关于listview问题
- Go HSAIL and Other Language Standards Supported by GCC ( GCC 支持的Go HSAIL和其他语言标准 )
- linphone-获取sip:name@192.168.1.24中的name
- 其实你可以读懂OKHttp3的源码
- 关于在pdf文件中的中文字体显示
- AngularJS中的input指令
- 在安卓中使用Animation类实现基础动画效果
- ubuntu防火墙管理
- 剑指offer(java代码)——和为S的两个数字
- DevOps工具系列简介
- JAVA中静态代码块、构造方法、Super()父类与子类之间执行顺序
- spring mvc. 异步controller介绍
- 个人记录-LeetCode 107. Binary Tree Level Order Traversal II
- Tomcat部署时war和war exploded区别以及平时踩得坑