注册 登录
  • 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!

AngularJS 学习笔记 (三) 之ng-style,ng-show,ng-model,ng-src

前端 开心洋葱 2432次浏览 已收录 0个评论 手机上查看
AngularJS 学习笔记  (三) 之ng-style,ng-show,ng-model,ng-src

AngularJS ng-style 指令

ng-style 指令为 HTML 元素添加 style 属性。

ng-style 属性值必须是对象,表达式返回的也是对象。

对象由 CSS 属性和值注册,即 key=>value 对。









菜鸟教程

AngularJS ng-show 指令

ng-show 指令在表达式为 true 时显示指定的 HTML 元素,否则隐藏指定的 HTML 元素。

ng-show="expression">









显示 HTML: ng-model="myVar">

ng-show="myVar">

Welcome

Welcome to my home.

AngularJS ng-model 指令

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。





 



名字: ng-model="name">

使用 ng-model 指令来绑定输入域的值到控制器的属性。

  • 双向绑定




 



名字:

你输入了: {{name}}

修改输入框的值,标题的名字也会相应修改。

  • 验证用户输入




 



Email: ng-show="myForm75271.myAddress.$error.email">不是一个合法的邮箱地址

在输入框中输入你的邮箱地址,如果不是一个合法的邮箱地址,会弹出提示信息。

  • 应用状态




 



Email:

编辑邮箱地址,查看状态的改变。

状态

Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。

Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。

Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。

  • CSS 样式类




 




输入你的名字:

编辑文本域,不同状态背景颜色会发送变化。

文本域添加了 required 属性,该值是必须的,如果为空则是不合法的。

ng-model 指令根据表单域的状态添加/移除以下类:

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

AngularJS ng-src 指令

ng-src 指令覆盖了 元素的 src 属性。

如果你使用了 AngularJS 代码设置图片地址,请使用 ng-src 指令替代 src 属性。

ng-src 指令确保的 AngularJS 代码执行前不显示图片。









Angular

该实例可以使用原生的 src 输出,但是使用 AngularJS 代码插入值,使用 ng-src 属性更好。


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明AngularJS 学习笔记 (三) 之ng-style,ng-show,ng-model,ng-src
喜欢 (0)
[开心洋葱]
分享 (0)
关于作者:
开心洋葱,开心洋葱头,水墨

您必须 登录 才能发表评论!

……
加载中……