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. Hadoop HDFS本地存储目录结构解析

    转自:https://blog.csdn.net/superman_xxx/article/details/51689398 HDFS metadata以树状结构存储整个HDFS上的文件和目录,以及相 ...

  2. ElasticSearch删除索引

    curl -X DELETE http://{ES IP address}:9200/{index_name}

  3. 使用Xmanager远程CentOS 7服务器（XDMCP）

    0. 前言 基本概念 简略概述 Display Manager 提供登录需求 在文字界面下可以通过startx来启动Xwindows 在runlevel 5下,在tty7处有可以使用的图形登录界面(方 ...

  4. C++输出字符指针指向的地址

    int main() { char *s2 = "jwdajkj"; ]; )); printf("%p,%p\n", s3, s1); cout <&l ...

  5. python3标准库总结

    Python3标准库 操作系统接口 os模块提供了不少与操作系统相关联的函数. ? 1 2 3 4 5 6 >>> import os >>> os.getcwd( ...

  6. 2019 Multi-University Training Contest 1 - 1009 - String - 贪心

    不知道错在哪里. 是要把atop改成stop!两个弄混了.感谢自造样例. #include<bits/stdc++.h> using namespace std; typedef long ...

  7. 标签的增加、删除与复制，动态标签js不生效的解决

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS小案例--全选和全不选列表功能的实现

    纯js代码实现列表全选和全不选的功能 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  9. 【转】 关于form与表单提交操作的一切

    参考一:http://caibaojian.com/form.html 参考二:https://blog.csdn.net/weixin_42301628/article/details/867156 ...

  10. facenet 人脸识别（一）

    前言 已完成TensorFlow Object Detection API环境搭建,具体搭建过程请参照: 安装运行谷歌开源的TensorFlow Object Detection API视频物体识别系 ...