- 浏览: 1053964 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (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 448https://www.imooc.com/article ... -
201806182117
2018-06-18 21:19 465https://blog.csdn.net/mosheng ... -
2018020508积累
2018-05-08 19:14 400https://blog.csdn.net/babyupup/ ... -
2018020404积累
2018-04-06 12:06 01.https://www.cnblogs.com/wxgb ... -
2018020328积累
2018-04-06 11:52 3811.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 431http://blog.csdn.net/lengcong ... -
20180228积累
2018-03-03 21:28 480https://jackywu.github.io/art ... -
20180225积累
2018-02-25 20:42 401生存发展的法则哈,管理层不想被偏门技术人员挟持,可技术人员 ... -
20180223积累
2018-02-24 09:35 384google浏览器点击链接 ... -
20180222积累2
2018-02-22 22:48 444http://www.aboutyun.com/threa ... -
异构数据源海量数据交换工具-Taobao DataX 下载和使用
2018-02-22 09:36 623DataX介绍 DataX是一个在异构的数据库/文件系统之 ... -
积累20180203
2018-02-03 13:18 335TRUNCATE TABLE 在功能上与不带 WHERE ... -
工作的常识
2018-02-01 11:19 478SN码是Serial Number的缩写,有时也叫Serial ... -
软件开发工作总结
2018-01-31 18:59 3261、分享第一条经验: ... -
war包不自动解压
2018-03-22 10:41 840war包放到了tomcat7下的webapps中不解压 , ... -
maven项目的不同
2018-01-07 15:41 01.maven的web项目和Java项目的创建 2.ecl ... -
电脑休眠和睡眠的区别
2018-01-07 08:55 601电脑休眠和睡眠的情况是不分台式和笔记本的! 休眠;就是把应用环 ...
相关推荐
2. 配置忽略文件:WebStorm支持配置忽略列表,开发者可以在项目根目录下创建或编辑一个名为“.ignore”的文件,在其中添加不想让IDE索引的文件或目录的规则。比如,可以添加一行“node_modules/”来让IDE忽略整个...
本文将详细介绍如何在WebStorm中设置自动压缩HTML文件,以实现每次保存时自动对HTML代码进行minify处理。 首先,了解HTML压缩的基本概念。HTML压缩主要是通过删除空格、换行符和不必要的字符,使文件体积减小,从而...
由于软件默认可能为英文界面,对于不熟悉英文的用户来说,可能会遇到理解上的困难,因此汉化文件显得尤为重要。 "resources_cn.jar"是汉化文件的主要组成部分,这是一个Java的资源文件包。在Java应用程序中,通常会...
webstorm主题及详细配置文件,一键式导入即可使用,主题加配置
本资源为"WebStorm2017.1汉化文件",主要用于解决中文用户在使用英文版WebStorm时的语言障碍。 汉化包的使用对于非英语母语的开发者来说至关重要,它能将WebStorm的界面菜单、提示信息等转化为中文,使用户更加便捷...
WebStorm是一款非常流行的集成开发环境(IDE),专为JavaScript、TypeScript、HTML和CSS等前端技术设计。由JetBrains公司开发,它提供了丰富的代码补全、语法高亮、智能提示、重构等功能,大大提升了前端开发的效率...
HTML+JavaScript+CSS+WebStorm开发技巧
10. **汉化文件**:"WebStorm2018.3汉化文件"是指将WebStorm的英文界面翻译成中文,便于中文用户使用,减少语言障碍,提高工作效率。 综上所述,WebStorm2018.3版本的汉化文件为中文用户提供了一个更为友好的开发...
这是因为不正确的覆盖方法会破坏`.jar`文件的结构,使得WebStorm无法识别。 正确的汉化步骤如下: 1. **备份原文件**:在进行任何修改前,一定要备份WebStorm安装目录下的所有相关`.jar`文件,以防止出错后可以...
在IT行业中,Web开发是不可或缺的一部分,而高效的开发工具能够极大地提升我们的生产力。WebStorm作为JetBrains公司出品的一款强大的Web前端开发IDE(集成开发环境),深受开发者喜爱。它支持多种前端技术,包括HTML...
在实际开发中,WebStorm的特性包括但不限于: 1. 强大的代码高亮和自动完成:支持多种编程语言,如JavaScript、TypeScript、HTML、CSS等,能够自动识别并高亮代码,同时提供智能补全功能,提高编码速度。 2. 代码...
webstorm
2. **备份原文件**:在进行汉化之前,建议先备份WebStorm的原始资源文件,以防汉化过程中出现问题或不满意汉化效果时可以恢复。 3. **解压汉化包**:将下载的"WebStorm10.0.3汉化包"压缩文件解压到一个临时文件夹,...
其次,如果项目中存在大量不需要索引的文件,这些文件同样会占用WebStorm的资源,导致运行缓慢。为了解决这个问题,我们可以直接在WebStorm中排除那些不需要索引的文件。操作步骤如下: 1. 打开WebStorm,并定位到...
1、将下载的WebStorm2018.3汉化文件解压缩。2、将.\Webstorm\lib目录下的resources_en.jar文件复制出来,并更名为resources_cn.jar。3、双击打开resources_cn.jar(注意是打开而不是解压出来),将下载的汉化包zh_CN...
用户可以将他们的自定义主题、字体和颜色设置导出为一个文件,然后在其他WebStorm实例中导入,确保无论在哪里工作都能保持一致的开发环境。这对于团队合作或者多设备使用的开发者来说,是非常方便的。 总的来说,这...
webstorm 2017.1破解版汉化说明: 1.在本站下载安装Webstorm 2017汉化包. 授权方式:免费软件软件类型:汉化补丁软件语言:简体中文软件大小:13 MB更新日期:2016-12-25运行环境:WinXP, Vista, Win7, win8, win10 ...
在使用JetBrains家族的开发工具,如IntelliJ IDEA、PhpStorm、WebStorm、PyCharm或CLion时,有时可能会遇到一个常见的问题:文件查找功能失效。即使项目中确实存在某个文件,但在尝试通过快捷键`Ctrl+Shift+N`进行...
WebStorm_2018.2汉化包+WebStorm_2018.3汉化包 - 使用说明:将 resources_zh_CN_*.jar ,放到软件安装路径下的 lib 目录中,重启软件即可 注意是 lib 不是 bin