- 浏览: 993724 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1441)
- 软件思想&演讲 (9)
- 行业常识 (250)
- 时时疑问 (5)
- java/guava/python/php/ruby/R/scala/groovy (213)
- struct/spring/springmvc (37)
- mybatis/hibernate/JPA (10)
- mysql/oracle/sqlserver/db2/mongdb/redis/neo4j/GreenPlum/Teradata/hsqldb/Derby/sakila (268)
- js/jquery/jqueryUi/jqueryEaseyUI/extjs/angulrJs/react/es6/grunt/zepto/raphael (81)
- ZMQ/RabbitMQ/ActiveMQ/JMS/kafka (17)
- lucene/solr/nuth/elasticsearch/MG4J (167)
- html/css/ionic/nodejs/bootstrap (19)
- Linux/shell/centos (56)
- cvs/svn/git/sourceTree/gradle/ant/maven/mantis/docker/Kubernetes (26)
- sonatype nexus (1)
- tomcat/jetty/netty/jboss (9)
- 工具 (17)
- ETL/SPASS/MATLAB/RapidMiner/weka/kettle/DataX/Kylin (11)
- hadoop/spark/Hbase/Hive/pig/Zookeeper/HAWQ/cloudera/Impala/Oozie (190)
- ios/swift/android (9)
- 机器学习&算法&大数据 (18)
- Mesos是Apache下的开源分布式资源管理框架 (1)
- echarts/d3/highCharts/tableau (1)
- 行业技能图谱 (1)
- 大数据可视化 (2)
- tornado/ansible/twisted (2)
- Nagios/Cacti/Zabbix (0)
- eclipse/intellijIDEA/webstorm (5)
- cvs/svn/git/sourceTree/gradle/jira/bitbucket (4)
- jsp/jsf/flex/ZKoss (0)
- 测试技术 (2)
- splunk/flunm (2)
- 高并发/大数据量 (1)
- freemarker/vector/thymeleaf (1)
- docker/Kubernetes (2)
- dubbo/ESB/dubboX/wso2 (2)
最新评论
webstorm的html文件如何不折叠style?(style是省略号)
ctrl + hift + '+'加号
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');
}
});
ctrl + hift + '+'加号
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');
}
});
发表评论
-
2018071904积累
2018-07-19 10:04 395https://www.imooc.com/article ... -
201806182117
2018-06-18 21:19 422https://blog.csdn.net/mosheng ... -
2018020508积累
2018-05-08 19:14 348https://blog.csdn.net/babyupup/ ... -
2018020404积累
2018-04-06 12:06 01.https://www.cnblogs.com/wxgb ... -
2018020328积累
2018-04-06 11:52 3201.https://blog.csdn.net/quinc ... -
2018020322积累
2018-03-22 10:59 0http://mysql.taobao.org/month ... -
2018020315积累
2018-03-15 23:24 0js中 a=b||0; 在这里||代 ... -
2018020308积累
2018-03-08 15:55 01.http://blog.csdn.net/liu943 ... -
2018020304积累
2018-03-04 18:37 378http://blog.csdn.net/lengcong ... -
20180228积累
2018-03-03 21:28 430https://jackywu.github.io/art ... -
20180225积累
2018-02-25 20:42 354生存发展的法则哈,管理层不想被偏门技术人员挟持,可技术人员 ... -
20180223积累
2018-02-24 09:35 324google浏览器点击链接 ... -
20180222积累2
2018-02-22 22:48 409http://www.aboutyun.com/threa ... -
异构数据源海量数据交换工具-Taobao DataX 下载和使用
2018-02-22 09:36 556DataX介绍 DataX是一个在异构的数据库/文件系统之 ... -
积累20180203
2018-02-03 13:18 296TRUNCATE TABLE 在功能上与不带 WHERE ... -
工作的常识
2018-02-01 11:19 413SN码是Serial Number的缩写,有时也叫Serial ... -
软件开发工作总结
2018-01-31 18:59 2891、分享第一条经验: ... -
war包不自动解压
2018-03-22 10:41 766war包放到了tomcat7下的webapps中不解压 , ... -
maven项目的不同
2018-01-07 15:41 01.maven的web项目和Java项目的创建 2.ecl ... -
电脑休眠和睡眠的区别
2018-01-07 08:55 540电脑休眠和睡眠的情况是不分台式和笔记本的! 休眠;就是把应用环 ...
相关推荐
webstorm是非常流行的前端开发IDE 而minify html压缩html代码也是前端必备技能之一 如何让webstorm存盘html文件时,自动压缩html文件?我一步一步教你
webstorm主题及详细配置文件,一键式导入即可使用,主题加配置
WebStorm2016汉化文件,主要用于webstorm的汉化,汉化方法百度上均有
WebStorm2018.3汉化文件,
HTML+JavaScript+CSS+WebStorm开发技巧
下面小编就为大家分享一篇完美解决webstorm启动索引文件卡死的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
webstorm
webstorm 2017.1破解版汉化说明: 1.在本站下载安装Webstorm 2017汉化包. 授权方式:免费软件软件类型:汉化补丁软件语言:简体中文软件大小:13 MB更新日期:2016-12-25运行环境:WinXP, Vista, Win7, win8, win10 ...
详细的WebStorm快捷键pdf 文件
JetBrains IntelliJ IDEA,PhpStorm,WebStorm,Pycharm,CLion中文件查找功能失效,明明有文件就是查不到 的解决办法.zip
使用方式打开webstorm ,点击setting-Editor-》code style - 》manage import;
WebStorm 10.0.4汉化包
1、将下载的WebStorm2018.3汉化文件解压缩。2、将.\Webstorm\lib目录下的resources_en.jar文件复制出来,并更名为resources_cn.jar。3、双击打开resources_cn.jar(注意是打开而不是解压出来),将下载的汉化包zh_CN...
WebStorm的汉化包要注意版本的匹配,否则可能引起软件不能正常启动。这个是2017.1版本的。我现在的WebStrom是今天2017.4.9从官网下载的最新版本,装上了没问题
webstorm10.0.3汉化包webstorm10.0.3汉化包webstorm10.0.3汉化包webstorm10.0.3汉化包webstorm10.0.3汉化包
2、将.\Webstorm\lib目录下的resources_en.jar文件复制出来,并更名为resources_cn.jar。 3、双击打开resources_cn.jar(注意是打开而不是解压出来),将下载的汉化包zh_CN目录下的所有文件拖到刚才打开的resources...
webstorm 最全快捷键 web前端开发利器啊
webStorm, webStorm主题, webStorm主题色彩, 类似Vscode经典主题, 自定义字体+颜色+语法高亮+导入导出用户设置