AngularJS ng-model 指令
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 指令的更多相关文章
- AngularJS开发指南11：AngularJS的model，controller，view详解
model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...
- 使用Angularjs的ng-cloak指令避免页面乱码
在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...
- 走进AngularJs(五)自定义指令----（下）
自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...
- AngularJS中Directive指令系列 - scope属性的使用
文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...
- Angularjs 动态添加指令并绑定事件
先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: http://jsbin.com/gajizuyuju/edit?html,js,output var count=0 ...
- AngularJs -- 内置指令
AngularJS提供了一系列内置指令.其中一些指令重载了原生的HTML元素,比如<form>和<a>标签, 当在HTML中使用标签时,并不一定能明确看出是否在使用指令. 其他 ...
- AngularJS中的指令全面解析（转载）
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- 走进AngularJs(四)自定义指令----（中）
上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 你知道用AngularJs怎么定义指令吗？
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...
随机推荐
- postgresql中实现按周统计详解
SELECT EXTRACT(DOW FROM CURRENT_DATE); 执行结果如下. 这个SQL语句的意思就是计算当前日期是一周中的第几天. EXTRACT(DOW FROM CURREN ...
- URL的‘#’号
转载自:传送门 去年9月,twitter改版. 一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为 http://twitter.com/username 改 ...
- Web控件中Eval()的使用
1.使用Eval()绑定数据时使用三元运算符 <%#Eval("hg_A").ToString()=="1"?"通过":Eval(&q ...
- Filter 和Listener
Filter 和Listener Filter : 过滤器 1.概念 浏览器发出请求访问服务器的资源,过滤器将请求拦截,完成一些特殊的功能. 作用:一般用于完成通过的操作.如:登陆验证.统一编码处理. ...
- [Python3] 021 面向对象 第一弹
目录 1. 面向对象概述 1.1 OOP 思想 1.2 几个名词 1.3 类与对象 2. 类的基本实现 2.1 类的命名 2.2 如何声明一个类 2.3 如何实例化一个类 2.4 如何访问对象成员 2 ...
- [Linux] 012 文件搜索命令
文件搜索命令:find 命令名称:find 命令所在路径:/bin/find 执行权限:所有用户 语法:find [搜索范围] [匹配条件] 功能描述:文件搜索 范例: 在目录 /etc 中查找文件 ...
- PHP_CodeIgniter _remap重新定义方法
如果controller定义了_remap方法, 在_remap中重新定义方法 class Test extends CI_Controller{ public function index(){ e ...
- 用vuex写了一个购物车H5页面的示例代码
用vuex写了一个购物车H5页面的示例代码:https://www.jb51.net/article/152008.htm 通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是 ...
- 56-python基础-python3-集合-新建集合
集合对象是一组无序排列的可哈希的值,集合成员可以做字典中的键. 集合支持用in和not in操作符检查成员. 由len()内建函数得到集合的基数(大小). 用 for 循环迭代集合的成员. 但是因为集 ...
- 浅谈XML涉及到的常见技术（编写+解析）
xml:即可扩展标记语言,用于描述关系型数据,也经常用作软件的配置文件: 1,编写xml文档一般基于一个约束文档,该文档用于规定xml的书写规范,常用的约束技术有 (1)XML ...