`
weitao1026
  • 浏览: 1053964 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

webstorm的html文件如何不折叠style?

 
阅读更多
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');
            }
        });
分享到:
评论

相关推荐

    完美解决webstorm启动索引文件卡死的问题

    2. 配置忽略文件:WebStorm支持配置忽略列表,开发者可以在项目根目录下创建或编辑一个名为“.ignore”的文件,在其中添加不想让IDE索引的文件或目录的规则。比如,可以添加一行“node_modules/”来让IDE忽略整个...

    webstorm存盘时压缩html

    本文将详细介绍如何在WebStorm中设置自动压缩HTML文件,以实现每次保存时自动对HTML代码进行minify处理。 首先,了解HTML压缩的基本概念。HTML压缩主要是通过删除空格、换行符和不必要的字符,使文件体积减小,从而...

    WebStorm2016汉化文件

    由于软件默认可能为英文界面,对于不熟悉英文的用户来说,可能会遇到理解上的困难,因此汉化文件显得尤为重要。 "resources_cn.jar"是汉化文件的主要组成部分,这是一个Java的资源文件包。在Java应用程序中,通常会...

    webstorm主题及详细配置文件

    webstorm主题及详细配置文件,一键式导入即可使用,主题加配置

    WebStorm2017.1汉化文件

    本资源为"WebStorm2017.1汉化文件",主要用于解决中文用户在使用英文版WebStorm时的语言障碍。 汉化包的使用对于非英语母语的开发者来说至关重要,它能将WebStorm的界面菜单、提示信息等转化为中文,使用户更加便捷...

    webstorm汉化包下载

    WebStorm是一款非常流行的集成开发环境(IDE),专为JavaScript、TypeScript、HTML和CSS等前端技术设计。由JetBrains公司开发,它提供了丰富的代码补全、语法高亮、智能提示、重构等功能,大大提升了前端开发的效率...

    HTML+JavaScript+CSS+WebStorm开发技巧

    HTML+JavaScript+CSS+WebStorm开发技巧

    WebStorm2018.3系列汉化文件

    10. **汉化文件**:"WebStorm2018.3汉化文件"是指将WebStorm的英文界面翻译成中文,便于中文用户使用,减少语言障碍,提高工作效率。 综上所述,WebStorm2018.3版本的汉化文件为中文用户提供了一个更为友好的开发...

    webstorm汉化 细节覆盖文件

    这是因为不正确的覆盖方法会破坏`.jar`文件的结构,使得WebStorm无法识别。 正确的汉化步骤如下: 1. **备份原文件**:在进行任何修改前,一定要备份WebStorm安装目录下的所有相关`.jar`文件,以防止出错后可以...

    webstorm9设置scss和typescript

    在IT行业中,Web开发是不可或缺的一部分,而高效的开发工具能够极大地提升我们的生产力。WebStorm作为JetBrains公司出品的一款强大的Web前端开发IDE(集成开发环境),深受开发者喜爱。它支持多种前端技术,包括HTML...

    WebStorm2017.2.4汉化文件

    在实际开发中,WebStorm的特性包括但不限于: 1. 强大的代码高亮和自动完成:支持多种编程语言,如JavaScript、TypeScript、HTML、CSS等,能够自动识别并高亮代码,同时提供智能补全功能,提高编码速度。 2. 代码...

    webstormwebstorm1

    webstorm

    webstorm10.0.3汉化包

    2. **备份原文件**:在进行汉化之前,建议先备份WebStorm的原始资源文件,以防汉化过程中出现问题或不满意汉化效果时可以恢复。 3. **解压汉化包**:将下载的"WebStorm10.0.3汉化包"压缩文件解压到一个临时文件夹,...

    基于webstorm卡顿问题的2种解决方法

    其次,如果项目中存在大量不需要索引的文件,这些文件同样会占用WebStorm的资源,导致运行缓慢。为了解决这个问题,我们可以直接在WebStorm中排除那些不需要索引的文件。操作步骤如下: 1. 打开WebStorm,并定位到...

    WebStorm2018.3中文汉化文件.zip

    1、将下载的WebStorm2018.3汉化文件解压缩。2、将.\Webstorm\lib目录下的resources_en.jar文件复制出来,并更名为resources_cn.jar。3、双击打开resources_cn.jar(注意是打开而不是解压出来),将下载的汉化包zh_CN...

    WebStorm主题,类似VsCode经典主题

    用户可以将他们的自定义主题、字体和颜色设置导出为一个文件,然后在其他WebStorm实例中导入,确保无论在哪里工作都能保持一致的开发环境。这对于团队合作或者多设备使用的开发者来说,是非常方便的。 总的来说,这...

    WebStorm-2017.1 汉化文件(经测试win10-64bit可用)

    webstorm 2017.1破解版汉化说明: 1.在本站下载安装Webstorm 2017汉化包. 授权方式:免费软件软件类型:汉化补丁软件语言:简体中文软件大小:13 MB更新日期:2016-12-25运行环境:WinXP, Vista, Win7, win8, win10 ...

    JetBrains IntelliJ IDEA,PhpStorm,WebStorm,Pycharm中文件查找功能失效,明明有文件就是查不到 的解决办法.zip

    在使用JetBrains家族的开发工具,如IntelliJ IDEA、PhpStorm、WebStorm、PyCharm或CLion时,有时可能会遇到一个常见的问题:文件查找功能失效。即使项目中确实存在某个文件,但在尝试通过快捷键`Ctrl+Shift+N`进行...

    WebStorm_2018.3汉化包

    WebStorm_2018.2汉化包+WebStorm_2018.3汉化包 - 使用说明:将 resources_zh_CN_*.jar ,放到软件安装路径下的 lib 目录中,重启软件即可 注意是 lib 不是 bin

Global site tag (gtag.js) - Google Analytics