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. bzoj 2665: [cqoi2012]编号

    题目中说任意两个数至少要有3个位上数不相同,那么其实也就是从7个数中选出5个这样任意的组合全部不同,用数组f[i][j][k][l][m][n]记一下就好了,i为第几种组合,一共C(7,5)种,最后爆 ...

  2. 浙南联合训练赛 D - Broken Clock

    You are given a broken clock. You know, that it is supposed to show time in 12- or 24-hours HH:MM fo ...

  3. [转]MySQL更改用户密码

    grant all privilegeson *.* to root@'localhost'identified by 'root'with grant option; grant all privi ...

  4. 推荐一套WPF主题皮肤

    在CodePlex上发现了一套WPF的主题皮肤,直接应用于系统自带的控件,一共有四种配色方案,做得也还比较精致.感兴趣的朋友可以使用一下.点击下载      另外一套我比较喜欢的皮肤这里也推荐一下吧: ...

  5. C#开源框架整理

    Json.NET http://json.codeplex.com/ Json.Net 是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Li ...

  6. app生成工具

    国内主流的在线APP生成工具 应用公园:http://www.apppark.cn/ 追信魔盒:http://app.zhui.cn/ 安米网:http://www.appbyme.com/ 简网AP ...

  7. "com.android.ide.s.ProcessException:Process 'cand 'C:\Program Files\Java\jdk1.8.0_60\bin\java.exe'' finished with non-zero exit value 2"

    使用Android Studio 出现该问题: "com.android.ide.common.process.ProcessException: org.gradle.process.in ...

  8. scrapy中ROBOTSTXT_OBEY = True的相关说明

    在scrapy中创建项目以后,在settings文件中有这样的一条默认开启的语句: # Obey robots.txt rules ROBOTSTXT_OBEY = True 观察代码可以发现,默认为 ...

  9. How to publish a WordPress blog to a static GitLab Pages site

    https://opensource.com/article/18/8/publish-wordpress-static-gitlab-pages-site A long time ago, I se ...

  10. Mapreduce 测试自带实例 wordcount

    2.7.3版本的hadoop: jar程序所在目录:$HADOOP_HOME/shar/hadoop/mapreduce/hadoop-mapreduce-examples-2.7.3.jar 1.本 ...