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="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');
}
});
angularjs—指令input的更多相关文章
- AngularJS指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
- AngularJS 指令
AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令 ng-app 指令定义了 AngularJS 应用程序的 根元素. ng-app 指 ...
- angularjs指令(二)
最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- AngularJS指令进阶 – ngModelController详解
AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
- AngularJS学习之旅—AngularJS 指令(三)
1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...
- 一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好
学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是 ...
- AngularJS指令封装高德地图组件
1 概述 公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图频繁的弹出广告,所以打算重新引用其它地图组件,最后决定基于AngularJ ...
- AngularJS 指令实践指南(二)
这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope.第二部分将承接上一篇继续介绍.首先,我们会看到在使用隔离scope的情况下,如何从指令 ...
随机推荐
- Juint整合Log4j
一般Log4j配置在web.xml中,在单元测试时,不需要启动Tomcat,所有Log4j找不到配置文件 在测试类中手动加载 配置文件 PropertyConfigurator.configure(& ...
- ECS Win2008 远程时提示"要登录到此远程计算机,您必须被授予允许通过终端登录登录的权限"的解决方法
问题描述 ECS Windows 2008 远程登陆时提示"要登录到此远程计算机,您必须被授予允许通过终端登录登录的权限",如下图所示: 问题分析 组策略中做了设置不允许管理员组成 ...
- 深入理解闭包系列第三篇——IIFE
× 目录 [1]实现 [2]用途 前面的话 严格来讲,IIFE并不是闭包,因为它并不满足函数成为闭包的三个条件.但一般地,人们认为IIFE就是闭包,毕竟闭包有多个定义.本文将详细介绍IIFE的实现和用 ...
- FragmentPagerAdapter+ViewPager实现Tab切换效果
1.Activity 加载布局文件,获取Viewpager控件 给ViewPager填充适配器. import android.app.ActionBar; import android.app ...
- ASP.NET 5 使用 TestServer 进行单元测试
之前如果对 ASP.NET WebAPI 进行单元测试(HttpClient 发起请求,并且可调试 WebAPI),一般采用 Owin 的方式,具体参考:<开发笔记:用 Owin Host 实现 ...
- 初识MongoDB
1. 初识 接触MongoDB,是由于最近在工作中用到了MongoDB做数据存储.之前也听说过这个NoSQL数据库,但是一直没有尝试去使用它做开发.这次趁着这个机会,想好好学习下这个NoSQL数据库. ...
- Hibernate之HQL查询的一些例子
Hibernate配备了一种非常强大的查询语言,就是HQL(hibernate query language),HQL看上去很像sql,但只是语法结构上相似,HQL是一种面向对象的查询,他可以理解继承 ...
- hibernate笔记--cascade级联以及inverse属性
cascade : 不管是单向多对一还是一对多,或者是双向的一对多关系,在一的一端映射文件中有一个set标签,在多的一端有many-to-one标签,拿前几篇笔记里讲的Grade和Student举例, ...
- StructureMap.dll 中的 GetInstance 重载 + 如何利用 反射动态创建泛型类
public static T GetInstance<T>(ExplicitArguments args); // // Summary: // Creates a new instan ...
- PHP中json_encode后中文乱码的解决方案
<?php header("Content-Type:text/html;charset=utf-8;"); $arr = array ('Version_code'=> ...