AngularJS入门教程之AngularJS模型


Posted in Javascript onApril 18, 2016

相关阅读:

在前面表达式和指令的教程中了解到,AngularJS模型(ng-model)可以将HTML输入域中的值与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="" ng-init="name='Jone Snow'">
名字: <input ng-model="name">
</div>
</body>
</html>

双向绑定 AngularJS的双向绑定, 是指ng-model与HTML的输入域绑定,同时也与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 Snow";
});
</script>
<p>修改输入框的值,标题的名字也会相应修改。</p>
</body>
</html>

应用状态 ng-model 指令可以为应用数据提供状态值

dirty 当数据被修改时状态为TRUE,没有被修改过为FALSE。即使修改为原来的值,也为TRUE。

valid 输入值合法时为TRUE,不合法则为FALSE。

touched 通过触屏点击为TRUE,没有点击为FALSE。

根据状态来应用CSS样式

<!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>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
</body>
</html>

input域增加了required状态,当input域没有输入时,ng-model为input域增加ng-invalid样式。反之则删除ng-invalid样式。 ng-model 指令根据表单域的状态添加/移除以下样式: - ng-empty - ng-not-empty - ng-touched - ng-untouched - ng-valid - ng-invalid - ng-dirty - ng-pending - ng-pristine 使用ng-model验证邮箱格式

<!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>
</body>
</html>

myForm.myAddress.$error.email属性为TRUE(邮箱格式不正确)时,ng-show会控制span的内容显示出来。

以上内容是小编给大家介绍的AngularJS入门教程之AngularJS模型,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 #Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 #Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 #Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 #Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 #Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 #Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 #Javascript
You might like
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
Joomla开启SEF的方法
2016/05/04 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
JS location几个方法小姐
2008/07/09 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
详解pandas赋值失败问题解决
2020/11/29 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
逻辑链路控制协议
2016/10/01 面试题
会计大学生职业生涯规划书范文
2014/01/13 职场文书
会议活动邀请函
2014/01/27 职场文书
大学生活动总结模板
2014/07/02 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
学习与创新自我评价
2015/03/09 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
个人道歉信大全
2019/04/11 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
新手入门Mysql--概念
2021/06/18 MySQL
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技