angularJS提供输入框不同状态下的样式绑定

输入框有4种状态

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

        input.ng-invalid {

            background-color: lightblue;

        }

    </style>

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

    <form ng-app="" name="myForm">

        Email:

        <input type="email" name="myAddress" ng-model="text" required>

        <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

    </form>

</body>

</html>

　效果　

ng-show是一个bool值 里面可以是js代码 返回true则显示这个span标签

angularJS 状态样式绑定的更多相关文章

  1. Vue样式绑定、事件绑定

    1.样式绑定 1.1class类标签绑定 <p :class="对象"> <p :class="数组"> <p :class=&q ...

  2. wpf样式绑定 行为绑定 事件关联 路由事件实例

    代码说明:我要实现一个这样的功能  有三个window窗口  每个窗体有一个label标签  当我修改三个label标签中任意一个字体颜色的时候  其他的label标签字体颜色也变化 首先三个窗体不用 ...

  3. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

  4. Vue（九）：样式绑定v-bind示例

    Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 st ...

  5. vue的样式绑定

    vue在样式绑定,看这官方的文档,怎么试都不行后来看了一篇文章 <div :class="[rankClass]"></div> <script> ...

  6. AngularJS添加样式

    AngularJS添加样式 通过controller.js中的某个$scope变量的值来决定div标签(或者其他html标签)的样式表. 示例 使用ng-style指令在div标签上 <body ...

  7. Vue.js：样式绑定

    ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...

  8. Vue.js学习笔记 第二篇 样式绑定

    Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. Vue 将样式绑定到一个对象让模板更清晰

    Vue 将样式绑定到一个对象让模板更清晰 <div id="app"> <div v-bind:style="styleObject"> ...

随机推荐

  1. 网络编程之tcp五层模型

    网络编程 1.客户端与服务端架构:C/S   B/S  架构 client <-------基于网络通信-------->server brower<-------基于网络通信--- ...

  2. 浅谈分布式CAP定理

    互联网发展到现在,由于数据量大.操作并发高等问题,大部分网站项目都采用分布式的架构.而分布式系统最大的特点数据分散,在不同网络节点在某些时刻(数据未同步完,数据丢失),数据会不一致. 在2000年,E ...

  3. Java高级架构师（一）第38节：Nginx的负载均衡模块

    负载均衡: 1.热备:如果你有2台服务器,当一台服务器发生事故时,才启用第二台服务器给提供服务.服务器处理请求的顺序:AAAAAA突然A挂啦,BBBBBBBBBBBBBB..... upstream ...

  4. 8VC Venture Cup 2016 - Elimination Round B. Cards 瞎搞

    B. Cards 题目连接: http://www.codeforces.com/contest/626/problem/B Description Catherine has a deck of n ...

  5. opencv中SiftDescriptorExtractor所做的SIFT特征向量提取工作简单分析

    SiftDescriptorExtractor对应于SIFT算法中特征向量提取的工作,通过他对关键点周围邻域内的像素分块进行梯度运算,得到128维的特征向量.具体有如下几个操作: 0.首先,我们假设在 ...

  6. ubuntu系统使用dnw下载程序

    转:http://blog.chinaunix.net/uid-22030783-id-3350840.html 获得dnw4linux.tar.bz2 源码包,可在xcembed论坛下载:http: ...

  7. mac -- 安装OpenCV

    brew install opencv #这个装的是3.4 brew unlink opencv # 取消关联 brew install opencv@2  # 安装2.X的版本

  8. select标签中的选项分组

    select标签中的选项分组 <select name="showtimes"> <optgroup label="下午一点"> < ...

  9. @RestController和@Controller的差异

    SpringMVC现在使用越来越普及,在使用注解写控制器中发现,需要控制器页面跳转时,需要对类注解为@Controller,而此时,使用freemarker时,在类中写的restful接口会报cann ...

  10. xss payload

    xss payload可以使用富客户端文本书写,大多数用javascript,少部分用actionscript等等. 1.盗取cookie,发起cookie劫持 使用xss漏洞插入cookie.js ...