AngularJS学习之模型
1.ng-model指令：可以将输入域的值与AngularJS创建的变量绑定，用于绑定应用程序数据到HTML控制器(input,select,textarea)的值；
<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>
2.双向绑定：在修改输入域的值时，AngularJS属性的值也将改变；
<div ng-app="myApp" ng-controller="myCtrl">
名字：<input ng-model="name">
<h1>你输入了：{{name}}</h1>
</div>
3.验证用户输入：
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
4.应用状态：ng-model指令可以为应用数据提供状态值(invalid,dirty,touched,error):
Valid: true (如果输入的值是合法的则为 true)。
Dirty: false (如果值改变则为 true)。
Touched: false (如果通过触屏点击则为 true)。
例子：
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="myText" required></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>
5.CSS类：ng-model指令基于它们的状态为HTML元素提供了CSS类：
<style>
input.ng-invalid{
background-color:lightblue;
};
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字：
<input name="myaddress" ng-model="text" required>
</form>
</body>
AngularJS学习之模型的更多相关文章
- 我的AngularJS 学习之旅
我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例 很早之前就 ...
- AngularJs学习总结－了解基本特性（－）
现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...
- Angularjs学习---官方phonecat实例学习angularjs step0 step1
接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...
- angularJS学习资源最全汇总
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...
- 推荐10个很棒的AngularJS学习指南
AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...
- Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结
karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...
- [整理]AngularJS学习资源
https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
随机推荐
- WP8 双击返回键退出
bool isExit = false; // 构造函数 public MainPage() { InitializeComponent(); isExit = false; // 用于本地化 App ...
- 甲鱼od18篇笔记
模态对话框和非模态对话框 一:模态对话框是调用DialogBoxParam API 函数来实现的 二:非模态对话框是调用Crea ...
- .NET微信公众号开发-1.0初始微信公众号
一.前言 微信公众号是开发者或商家在微信公众平台上申请的应用账号,该帐号与QQ账号互通,通过公众号,商家可在微信平台上实现和特定群体的文字.图片.语音.视频的全方位沟通.互动 .形成了一 种主流的线上 ...
- 【转】深入Windows内核——C++中的消息机制
上节讲了消息的相关概念,本文将进一步聊聊C++中的消息机制. 从简单例子探析核心原理 在讲之前,我们先看一个简单例子:创建一个窗口和两个按钮,用来控制窗口的背景颜色.其效果 图1.效果图 Win32 ...
- Innodb之拷贝InnoDB表从一服务器到另一台服务器2
本章节阐述将表移动到不同server上的技术.如可以将整个Mysql 实例转移到更大.更快的Server上:也可以拷贝整个实例到Slave上:也可以拷贝单个表或某些表到其他Server上(数据仓库). ...
- Java——Cookie与Session
Cookie通过客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份. 1.Cookie 1.1概念及使用方法 Cookie实际上是一小段文本信息.客户端请求服务器,如果服务 ...
- .net学习笔记---lambda表达式（自执行方法）
http://www.cnblogs.com/jesse2013/p/happylambda.html#b034 lambda表达式 http://www.cnblogs.com/OceanEyes/ ...
- Java学习笔记（十六）——Java RMI
[前面的话] 最近过的好舒服,每天过的感觉很充实,一些生活和工作的技巧注意了就会发现,其实生活也是可以过的如此的有滋有味,满足现在的状况,并且感觉很幸福. 学习java RMI的原因是最近在使用dub ...
- 【转载】pyqt QTableWidget的使用
转载地址: http://blog.sina.com.cn/s/blog_9b78c91101019sgi.html QTableWidget是QT程序中常用的显示数据表格的空间,很类似于VC.C#中 ...
- Server.MapPath查询路径那几件事
主要总结Server.MapPath 这个方法的使用以及使用的场景,不是什么时候都适合使用: 1.实现功能: Server.MapPath能够获取指定URL相对服务器的物理路径,在IIS服务端,能够根 ...