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. 【分类讨论】【计算几何】【凸包】hihocoder 1582 ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛 E. Territorial Dispute

    题意:平面上n个点,问你是否存在一种黑白染色方案,使得对于该方案,无法使用一条直线使得黑色点划分在直线一侧,白色点划分在另一侧.如果存在,输出一种方案. 如果n<=2,显然不存在. 如果所有点共 ...

  2. Codeforces Round #343 (Div. 2) E. Famil Door and Roads lca 树形dp

    E. Famil Door and Roads 题目连接: http://www.codeforces.com/contest/629/problem/E Description Famil Door ...

  3. mysql常见故障问题汇总

    Auth: JinDate: 20140414 UpdateDate: 继续更新 导库字符集的问题http://www.cnblogs.com/diege/p/3640618.htmlmysql-pr ...

  4. friend ---- public and private

    I mean the difference between: class A{public: friend class B;};and class A{private: //or nothing as ...

  5. linux图机界面机制

    1．X WindowX Window 是由麻省理工学院(MIT)推出的窗口系统,简称X,它旨在建立不依赖于特定硬件系统的图形和文字显示窗口系统的标准.1987 年9 月,MIT 推出了X 系统的11 ...

  6. 怎么设置IDEA，去除单词拼写检查，或者添加自定义的单词

    如图所示,添加自定义的单词,这样IDEA检查的时候,就不会报错了.估计默认是根据英文单词来释义的.

  7. 〔原创〕Ubuntu Linux Server 9.04 安装全程图解

    关于Ubuntu Linux Server 9.04 版本的安装使用.先声明几点: 1. 整个安装过程,都是全英文的,而且,是文本模式,不像Desktop版本,有Livecd的图形化模式.2. 刚开始 ...

  8. 一起talk GDB吧（第五回：GDB查看信息）

    各位看官们.大家好,上一回中我们说的是GDB的调用栈调试功能,而且说了怎样使用GDB进行查看调用 栈.这一回中,我们继续介绍GDB的调试功能:查看信息.当然了.我们也会介绍怎样使用GDB查看程序 执行 ...

  9. 转：关于腾讯bugly崩溃的android so符号表使用

    http://www.jikexueyuan.com/course/406_8.html

  10. Thinkpad 笔记本 装win7 64 位操作系统热键驱动装不上问题解决！

    Thinkpad 笔记本 装win7 64 位操作系统热键驱动装不上问题解决! 一般牛人的解释如下: 问题终于搞定.是因为需要手工建%PROGRAMFILES%\Lenovo\Hotkey目录.这个写 ...