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. 【差分约束系统】【最短路】【spfa】CDOJ1646 穷且益坚， 不坠青云之志。

    求一个有n个元素的数列,满足任意连续p个数的和不小于s, 任意连续q个数的和不大于t. 令sum[i]表示前i项的和(0<=i<=n,sum[0]=0) 那么题目的条件可转化为: sum[ ...

  2. 【CCpp程序设计2017】简单进销存

    题目:简单进销存 功能要求: 实现如下的菜单(按数字选择菜单功能): 1. 显示存货列表 2. 入库 3. 出库 4. 退出程序 实现菜单对应功能(需记录货物的型号.数量等信息): 程序启动时从文件中 ...

  3. codevs 1779 单词的划分

    1779 单词的划分 时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description Problem有一个很长的由小写字母组成字符串.为了便于对 ...

  4. VS 2003

    isreset /stop net user ASPNET /delete aspnet_regiis -i iisreset /start

  5. 第六章在U盘上运行openwrt（引导）--补

    1.前言 前面已经把U盘挂在了703N上了,现在只需要打开路由器,使用TTL串口或者putty(ssh模式需要用户名和密码-第一章刷openwrt的时候已经设置好)登陆路由器. 2.将系统内所有文件同 ...

  6. Android ANR优化 2

    在实际情况中,当Android项目的用户量特别大时候,一些细小的问题也会被放大,ANR问题就是一个典型的例子. 一些ANR问题只会发生在用户实际使用的情景,当系统资源比较紧张等一些特殊情况下才会遇到, ...

  7. 常见Linux命令（非文件操作）

    可见 http://man.linuxde.net/systemctl 非常详尽

  8. 【转载】Instagram架构分析笔记

    原文地址:http://chengxu.org/p/401.html Instagram 架构分析笔记 全部 技术博客 Instagram团队上个月才迎来第 7 名员工,是的,7个人的团队.作为 iP ...

  9. scikit-learn入门学习记录

    一加载示例数据集 from sklearn import datasets iris = datasets.load_iris() digits = datasets.load_digits() 数据 ...

  10. 如何使用 awk 输出文本中的字段和列

    首先我们要知道,awk 能够自动将输入的行,分隔为若干字段.每一个字段就是一组字符,它们和其他的字段由一个内部字段分隔符分隔开来. 如果你熟悉 Unix/Linux 或者懂得 bash shell 编 ...