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. Game on a Tree Gym - 102392F(树上最大匹配)

    思路: 本质是求一个树上的最大匹配能否覆盖所有的点. dfs遍历,用qian[]数组记录当前节点的子树内有几个没有匹配的点(初始化为-1因为可以匹配掉一个子树中未匹配的点),pipei[]数组记录当前 ...

  2. Recurrent Neural Network(1):Architecture

    Recurrent Neural Network是在单个神经元上,除了输入与输出外,添加了一条Recurrent回路.也就是说,节点当前的状态将会影响其未来的状态.下式可以表征此关系: st= f(s ...

  3. Windows系统CVE整理

    CVE-2018-8420(RCE) 受影响版本: Microsoft Windows 10 Version 1607 for 32-bit Systems Microsoft Windows 10 ...

  4. 难倒你了吧！ArrayList 为啥要实现 RandomAccess 接口？

    作者:蔡先森_caiyq https://www.jianshu.com/p/3e2a9e4c9e01 在我们的开发中,List接口是最常见不过,而且我们几乎每天都在用ArrayList或者Linke ...

  5. Manacher(最长镜面回文串)

    I - O'My! Gym - 101350I Note: this is a harder version of Mirrored string I. The gorillas have recen ...

  6. scite配置文件及常用设置

    在linux系统中,SciTE的用户设置文件为 ~/.SciTEUser.properties,优先级高于全局配置文件. scite是个不错的IDE工具,只是本人发现,在开发团队中和其他成员的编辑工具 ...

  7. eclipsePreferences位置

    1.Windows:菜单栏-Window-Preferences 2.Mac:应用顶部最左侧Eclipse-Preferences ---------------------------------- ...

  8. Oracle ORA-01033: ORACLE initialization or shutdown in progress 错误解决办法. 重启服务

    今天用Oracle突然出现Oracle ORA-01033: ORACLE initialization or shutdown in progress. 想起前两天删掉了几个DBF文件,幸好还没有清 ...

  9. 09-python的面向对象

    # 1. 面向对象概述(ObjectOriented,OO) - OOP思想 - 接触到任意一个任务,首先想到的是任务这个世界的构成,是由模型构成的 - 几个名词 - OO:面向对象 - OOA:面向 ...

  10. 一些常见的js校验

    今天有时间来总结一下那些常用的js校验: vernull = function(value){//非空校验 if(value.trim(value).length == 0){ return fals ...