AngularJS ng-model 指令

  • ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 代码示例如下：
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

名字: <input ng-model="name">

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.name = "John Doe";

});

</script>

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

</body>

</html>

双向绑定

双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改： 在中加入表达式{{xxx}} 代码示例如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

名字: <input ng-model="name">

<h1>你输入了: {{name}}</h1>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.name = "John Doe";

});

</script>

<p>修改输入框的值，标题的名字也会相应修改。</p>

</body>

</html>

验证用户输入

示例代码如下：

<form ng-app="" name="myForm">

    Email:

    <input type="email" name="myAddress" ng-model="text">

    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

</form>

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

</body>

</html>
  • 以上实例中，提示信息会在 ng-show 属性返回 true 的情况下显示。

应用状态

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error): <

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">

Email:

<input type="email" name="myAddress" ng-model="myText" required>

<p>编辑邮箱地址，查看状态的改变。</p>

<h1>状态</h1>

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

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

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

</form>

</body>

</html>

CSS 类

  • ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

<style>

input.ng-invalid {

    background-color: lightblue;

}

</style>

</head>

<body>

<form ng-app="" name="myForm">

    输入你的名字:

    <input name="myName" ng-model="myText" required>

</form>

<p>编辑文本域，不同状态背景颜色会发送变化。</p>

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

</body>

</html>

AngularJS ng-model 指令的更多相关文章

  1. AngularJS开发指南11：AngularJS的model，controller，view详解

    model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...

  2. 使用Angularjs的ng-cloak指令避免页面乱码

    在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...

  3. 走进AngularJs(五)自定义指令----（下）

    自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...

  4. AngularJS中Directive指令系列 - scope属性的使用

    文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...

  5. Angularjs 动态添加指令并绑定事件

    先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: http://jsbin.com/gajizuyuju/edit?html,js,output var count=0 ...

  6. AngularJs -- 内置指令

    AngularJS提供了一系列内置指令.其中一些指令重载了原生的HTML元素,比如<form>和<a>标签, 当在HTML中使用标签时,并不一定能明确看出是否在使用指令. 其他 ...

  7. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  8. 走进AngularJs(四)自定义指令----（中）

    上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...

  9. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  10. 你知道用AngularJs怎么定义指令吗？

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

随机推荐

  1. 将多个jpg文件以追加形式合并成一个文件_delphi教程 bmp 合并 http://www.west.cn/www/info/58058-1.htm

    将多个jpg文件以追加形式合并成一个文件_delphi教程 作者:网友供稿 点击:0 西部数码-全国虚拟主机10强!20余项虚拟主机管理功能,全国领先!第6代双线路虚拟主机,南北访问畅通无阻!云服务器 ...

  2. Nginx 模块 - ngx_core_module

    原文地址 示例配置 指令 accept_mutex accept_mutex_delay daemon debug_connection debug_points env error_log even ...

  3. Vagrant 手册之 Vagrantfile - 提示及技巧

    原文地址 Vagrantfile 是一种非常灵活的配置格式.语法基于 Ruby,可以用它做很多事情.在本页使用一些提示和技巧时,请注意正确使用它们. 1. 使用循环定义虚拟机 如果你想对多机器应用稍微 ...

  4. tp 框架 -文件上传

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <?ph ...

  5. Altium Designer chapter6总结

    绘制PCB中需要注意的如下: (1)网络表的载入:网络表是原理图与PCB之间的桥梁,而AD实现了真正的双向同步设计.在装入网表之前需要先添加相应的封装库. (2)元件的布局:一般采用手工布局:按照模块 ...

  6. 05 | 基础篇：某个应用的CPU使用率居然达到100%，我该怎么办？

    通过前两节对平均负载和 CPU 上下文切换的学习,我相信你对 CPU 的性能已经有了初步了解.不过我还是想问一下,在学这个专栏前,你最常用什么指标来描述系统的 CPU 性能呢?我想你的答案,可能不是平 ...

  7. python math 模块

    数学模块 引入模块:import math 注意: 使用某个模块下的函数,必须先引入这个模块,否则无法正常使用. ceil() 向上取整操作 格式:math.ceil(数值) 返回值:整型 floor ...

  8. Springboot-技术专区-war包部署在Tomcat上并修改默认端口

    springboot项目内置Tomcat,直接打成jar包在dos下运行即可,但有时我们需要用war包以非内嵌Tomcat的方式来部署,以下是本人的实际经验 1.首先需要修改pom.xml文件 < ...

  9. 【java】jstack分析查看线程状态

    演示代码 public class StackTest { public static void main(String[] args) { Thread thread = new Thread(ne ...

  10. C#设计模式：工厂模式

    一,工厂模式 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...