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. python一个简单的爬虫测试

    之前稍微学了一点python,后来一直都没用,今天稍微做一个小爬虫试一试.. 参考了: http://www.cnblogs.com/fnng/p/3576154.html 太久没用了,都忘记pych ...

  2. Web API使用记录系列（三）Web API与Owin

    还好在坚持,今天继续更新第三篇随笔----使用owin来启动WebAPI(这里还是以IIS为宿主,当然也可以使用别的如Console.Windows Server等) 关于OWIN(Open Web ...

  3. jQuery： on()特别的几种用法

    jQuery大家肯定用得非常的熟练了,没什么好讲的,今天为什么要写关于on这个事件绑定的API?主要还是因为看了大神的博文:web移动端浮层滚动阻止window窗体滚动JS/CSS处理;其中对于on用 ...

  4. 用JSP生成HTM网页，减轻数据库操作

    原文:http://www.jspkongjian.net/news.jsp?id=396 此教程的功能: 利用servlet 实现抓取一个网页,把这个网页保存为.htm  比如抓取我们的主页inde ...

  5. windows 线程同步

    Windows 临界区,内核事件,互斥量,信号量. 临界区,内核事件,互斥量,信号量,都能完成线程的同步,在这里把他们各自的函数调用,结构定义,以及适用情况做一个总结. 临界区: 适用范围:它只能同步 ...

  6. Java构造和解析Json数据的两种方法详解二——org.json

    转自:http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html 在www.json.org上公布了很多JAVA下的jso ...

  7. 【LaTeX】E喵的LaTeX新手入门教程（3）数学公式

    昨天熄灯了真是坑爹.前情回顾[LaTeX]E喵的LaTeX新手入门教程(1)准备篇 [LaTeX]E喵的LaTeX新手入门教程(2)基础排版上一期测试答案1.大家一开始想到的肯定是\LaTeX{}er ...

  8. Android4.4系统源码百度网盘下载

    众所周知.Android如今非常火,肯定也有非常多android开发人员像我一样想研究android系统的源码.可是假设依照Google官方站点http://source.android.com/so ...

  9. 支持解析GitHub Flavored Markdown(GFM)的PHP库-Parsedown

    网上搜索PHP的markdown解析库,只能找得到Michel的PHP Markdown,这个库很不错,但是他只能支持标准markdown和他自己定义的一套扩展php Markdown Extra.这 ...

  10. Kafka的架构设计（目前翻译最好的一稿）

    转自:http://www.oschina.net/translate/kafka-design 参与翻译(4人):fbm, 飞翔的猴子, Khiyuan, nesteaa 感谢这些同志们的辛勤工作, ...