AngularJS 模型详细介绍及实例代码


Posted in Javascript onJuly 27, 2016

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

Javascript 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
Jquery $when done then的用法详解
May 20 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
mock.js模拟数据实现前后端分离
Jul 24 Javascript
vue中英文切换实例代码
Jan 21 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 #Javascript
详解Angular开发中的登陆与身份验证
Jul 27 #Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 #Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 #Javascript
AngularJS 指令详细介绍
Jul 27 #Javascript
js中遍历Map对象的方法
Jul 27 #Javascript
angular.js分页代码的实例
Jul 27 #Javascript
You might like
新闻分类录入、显示系统
2006/10/09 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
玩转方法:call和apply
2014/05/08 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
Python3爬虫学习入门教程
2018/12/11 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
学生党员思想汇报范文
2014/01/09 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
运动会稿件100字
2014/02/21 职场文书
社区消防工作实施方案
2014/03/21 职场文书
企业党员一句话承诺
2014/05/30 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
小学数学教研活动总结
2014/07/01 职场文书
2014年科室工作总结
2014/11/20 职场文书
2016年国培研修日志
2015/11/13 职场文书
初三数学教学反思
2016/02/17 职场文书
如何使用SQL Server语句创建表
2022/04/12 SQL Server