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. 【贪心】Codeforces Round #436 (Div. 2) D. Make a Permutation!

    题意:给你一个长度为n的数组,每个元素都在1~n之间,要你改变最少的元素,使得它变成一个1~n的排列.在保证改动最少的基础上,要求字典序最小. 预处理cnt数组,cnt[i]代表i在原序列中出现的次数 ...

  2. 【泡咖啡1】linux下caffe编译以及python环境配置手记

    caffe是一个深度学习的库,相信搞深度学习的话,不是用这个库就是用theano吧.要想使用caffe首先第一步就是要配置好caffe的环境.在这里,我主要说的是在debian的linux环境下如何配 ...

  3. Linux下Apache、PHP、MySQL默认安装路径

    Apache: 如果采用RPM包安装,安装路径应在 /etc/httpd 目录下 Apache配置文件:/etc/httpd/conf/httpd.conf Apache模块路径:/usr/sbin/ ...

  4. Red Hat Enterprise Linux上配置SQL Server Always On Availability Group

    http://www.cnblogs.com/lavender000/p/6946848.html

  5. ADO特有的流化和还原

    ADO特有的流化和还原 {*******************************************************}{ }{ ADO 数据流化 }{ }{ 版权所有 (C) 20 ...

  6. MLP 之手写数字识别

    0. 前言 前面我们利用 LR 模型实现了手写数字识别,但是效果并不好(不到 93% 的正确率). LR 模型从本质上来说还只是一个线性的分类器,只不过在线性变化之后加入了非线性单调递增 sigmoi ...

  7. TensorFlow------读取CSV文件实例

    TensorFlow之读取CSV文件实例: import tensorflow as tf import os def csvread(filelist): ''' 读取CSV文件 :param fi ...

  8. [ES6] 11. String Templates

    ECMAscript 6 lets us use string templates to gain a lot more control over strings in JavaScript. var ...

  9. Win7 64位 IIS未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项

    未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项.试图加载格式不正 解决方案: 1.需要在IIS里设置,启用32位应用程序我用的是iis7 把启用32位应用程序的fals ...

  10. java中调用kettle转换文件

    java中调用kettle转换文件 通过命令行也能够调用,然后java中调用命令行代码也能够.这样没有和java代码逻辑无缝集成.本文说明kettle5.1中假设通过其它API和java代码无缝集成: ...