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 4428: [Nwerc2015]Debugging调试

    4428: [Nwerc2015]Debugging调试 Description Your fancy debugger will not help you in this matter. There ...

  2. 【伪随机数】【搜索】【RE】【bugku】mountainclimbing WriteUp

    Mountain Climbing WP 拿到题首先熟练地查个壳再用各种脱壳工具脱个壳. 脱壳之后熟练地双击感受一下出题者的恶意: 根据字面意思得知,是要根据一系列的操作来得到收益最大值,于是用ida ...

  3. mongo基础---增删改查

    正文 MongoDB 是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB是一个介于关系型数据库和非关系数据库之间的产品,是非关系数据 ...

  4. Linux下Git命令中文显示乱码的问题解决：274\232\350\256\256\346\200\273\347\273\223

    使用git add添加要提交的文件的时候,如果文件名是中文,会显示形如274\232\350\256\256\346\200\273\347\273\223的乱码. 解决方案:在bash提示符下输入: ...

  5. 手Q游戏中心上线 完美释放娱乐基因

        今年A股市场上手游概念股的表现可谓“独当一面”,不少和手游沾边的公司股价都翻了倍.在笔者看来,这些手游企业的股价明显高得离谱,这轮行情可以证明资本市场对手游的关注度非常高,但并不意味着这些手游 ...

  6. centos安装lnmp

    安装ssh yum install openssh-server ====================== 查看SSH是否安装. ◆输入命令:rpm -qa | grep ssh 注:若没安装SS ...

  7. Oracle下的ArcSDE创建的空间数据库的备份与恢复

    对Oracle下ArcSDE创建的空间数据库, 整体备份.恢复或迁移. 一.imp和exp命令方式 1.1 数据库完整备份 检查数据库字符集是否一致 SQL>select userenv(‘la ...

  8. Oracle数据库查看用户状态

    一.当前ORACLE用户的状态可查看视图DBA_USERS;一般情况下在使用的正常用户均处于OPEN状态. 1 SQL> select username,account_status from  ...

  9. javascript不依赖JS加载顺序事件对象实现

    背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常 ...

  10. RenderMonkey 练习 第二天 【opengl 光照模型】

    光照模型 3D渲染中, 物体表面的光照计算公式为: I = 环境光(Iambient) + 漫反射光(Idiffuse) + 镜面高光(Ispecular); 其中,环境光(ambient)计算公式为 ...