AngularJS 模型详细介绍及实例代码
AngularJS ng-model 指令
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
ng-model 指令
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
AngularJS 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.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>
运行结果：
名字:
使用 ng-model 指令来绑定输入域的值到控制器的属性。
双向绑定
双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：
AngularJS 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.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>
运行结果：
名字:
你输入了: John Doe
修改输入框的值，标题的名字也会相应修改。
验证用户输入
AngularJS 实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <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>
运行结果：
Email:
在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。
CSS 类
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：
AngularJS 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.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>
运行结果：
输入你的名字:
编辑文本域，不同状态背景颜色会发送变化。
文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。
ng-model 指令根据表单域的状态添加/移除以下类：
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
相关推荐
-
AngularJS基础学习笔记之简单介绍
AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HTML元素中. AngularJS是一个JavaScript框架 AngularJS是一个JavaScript框架,它是由JavaScript语言编写的类库. AngularJS以JavaScript文件的形式进行发布,我们可以通过script标记将它添加到web页面中: 复制代码 代码如下: <scri
-
AngularJs每天学习之总体介绍
这周末在家呆了两天,正好中午闲暇时间继续分享Angularjs相关,今天主要分享Angularjs总体介绍及数据绑定部分内容,下面直接进入主题. 1.基本概念: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的伪静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事,通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足. 2.版本 angualrjs1.x:目前比较稳定版
-
AngularJS 执行流程详细介绍
一.启动阶段 大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL页面先解析成DOM树,然后逐个加载DOM树中的每一个元素节点.我们可以把AngularJS当做一个类似jQuery的js库,我们通过<script>标签引入到HTML中,那么此时Angular就做为一个普通的DOM节点等待浏览器解析,当浏览器解析到这个节点时,发现它是一个js文件,那么浏览器会停止解析剩余的DOM节点,开始执行这个js(即angular.js),同时Angular会设置一个事件监听器来监听浏览器的DOM
-
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
ng-repeat-start与ng-repeat-end时AngularJS(1.2.x)扩展的,使用这两个指令可以灵活控制遍历形式. 例如: index.html <div class="uk-panel" ng-controller="UserCtrl"> <ul class="uk-list uk-list-striped"> <li ng-repeat-start="user in users&q
-
3个可以改善用户体验的AngularJS指令介绍
1.头像图片 为了在你的应用中展示头像图片,你需要使用用户的电子邮件地址,将地址转换为小写并使用md5加密该字符串.所以聪明的做法是使用指令来做到这些,并且可以复用. /* * A simple Gravatar Directive * @example * <gravatar-image email="test@email.com" size="50"></gravatar-image> */ app.directive('gravatar
-
AngularJS HTML编译器介绍
概览 AngularJS的HTML编译器能让浏览器识别新的HTML语法.它能让你将行为关联到HTML元素或者属性上,甚至能让你创造具有自定义行为的新元素.AngularJS称这种行为扩展为"指令" HTML在编写静态页面时,有很多声明式的结构来控制格式.比如你要把某个内容居中,你不必告诉浏览器"去找到窗口的中点位置,然后跟内容的中间结合".你只需要添加一个 align="center" 的属性给需要内容居中的元素就行了.这就是声明式语言的强大之处
-
关于angularJs指令的Scope(作用域)介绍
每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. 1.scope = false JS 代码: html 代码: result: 修改文本框的内容,两个名字都会变,实际上修改的是同一个$scope的name属性. 2. scope=true
-
AngularJS中的包含详细介绍及实现示例
AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 在 HTML 中包含 HTML 文件 在 HTML 中,目前还不支持包含 HTML 文件的功能. 服务端包含 大多服务端脚本都支持包含文件功能 (SSI: Server Side Includes). 使用 SSI, 你可在 HTML 中包含 HTML 文件,并发送到客户端浏览器. PHP 实例 <?php require("navigation.php"); ?> 客户端包
-
AngularJS中的Promise详细介绍及实例代码
Angular中的Promise 在用jQuery的时候就知道 promise 是 Js异步编程模式的一种模式,但是不是很明白他跟JQuery的deferred对象有什么区别.随着公司项目的进行,要跟后台接数据了,所以决定搞定它. Promise Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件. 我们知道,在编写JavaScript异步代码时,callback是最最简单的机制,可是用这种机制的话必须牺牲控制流.异常处理和函数语义化为代价,甚至会
-
AngularJS Bootstrap详细介绍及实例代码
AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. 查看 Bootstrap教程. Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.