文档章节

Angular中ng-model指令根据表单域状态添加css类的“空格”问题

coolrp
 coolrp
发布于 2016/11/30 20:29
字数 206
阅读 215
收藏 0

一、ng-model指令根据表单域的状态添加/移除以下类:

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

二、Angular在css中添加类的时候的空格问题:

       1. 我们在一般css中标签和类名之间一般用一个空格隔开,比如div标签下的类名为div1,如果不加空格,样式失效。

div .div1 {
    background: red;
}

       

        总结:一般 css中标签和类名之间加空格。

    

       2.当我在Angular中的.ng-invalid类前面加了一个空格时,发现样式失效了!!!

input .ng-invalid {
    background-color: red;
}

       

        正确的如下:

input.ng-invalid {
    background-color: red;
}

       

        总结:Angular中的指令添加的css类,标签和类之间不能加空格。

 

        怎么会有这样的区别?默认的?记录一下。。。

      

© 著作权归作者所有

共有 人打赏支持
coolrp
粉丝 10
博文 42
码字总数 7333
作品 0
襄阳
程序员
第217天:深入理解Angular双向数据绑定的原理

一、理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理。angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成。 那么什么是双向绑定,下面...

半指温柔乐
04/10
0
0
AngularJS 1.2.x 学习笔记(表单校验篇)

在新的项目中巧妙地接触到了Google提供的前端MVC框架 AngularJS,它的数据双向绑定真的能够让前端开发者从繁复的DOM操作中解放出来。 在我断断续续的学习AngularJS一个多月后,可以来讲讲我的...

cokolin
2015/11/06
0
0
5个示例带你学习AngularJS

本文由 伯乐在线 - 蝈蝈 翻译自 tutorialzine。欢迎加入技术翻译小组。转载请参见文章末尾处的要求。 直到现在,你或许已经听说过AngularJS了,一个改变你对web应用思考方式,由谷歌开发的令...

冬瓜1
2013/12/30
0
0
angular.animation的使用

overview angular-animate.js插件可以对,,,,,,,,,,等指令提供CSS3或者JS动画效果,这些指令分别两个梯队: 梯队一:DOM节点会被remove的梯队:if,view,repeat,include,switch 梯队二:DOM节点...

前端届的科比
2015/11/15
0
1
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608
04/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Swift-系统默认UICollectionViewController的基本用法

不用xib创建时,需要重写 override init(collectionViewLayout layout: UICollectionViewLayout){} 在调用时需传 UICollectionViewLayout值,不然就会报错 let layout = UICollectionViewFlow......

west_zll
31分钟前
3
0
Spring Boot 最核心的 3 个注解详解

最近面试一些 Java 开发者,他们其中有些在公司实际用过 Spring Boot, 有些是自己兴趣爱好在业余自己学习过。然而,当我问他们 Spring Boot 最核心的 3 个注解是什么,令我失望的是鲜有人能答...

Java技术栈
32分钟前
5
0
Sqoop 增量导入导出及Job操作示例

增量导入 递增列的增量导入append # 第一次导入[root@node222 ~]# /usr/local/sqoop-1.4.7/bin/sqoop import --connect jdbc:mysql://192.168.0.200:3306/sakila?useSSL=false --table ac......

PeakFang-BOK
38分钟前
3
0
Thread中断的理解

★中断的理解:1)中断可以理解为线程的一个标识位属性;2)表示一个运行中的线程是否被其他线程进行了中断操作 中断好比其他线程向该线程打了个招呼,其他线程通过调用该线程的interrupt()...

karma123
45分钟前
3
0
App store 侵权投诉

App Store Content Dispute 侵权投诉 https://www.apple.com/legal/internet-services/itunes/appstorenotices/#?lang=zh...

壹峰
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部