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的代码片段,通常放置在绑定 ...
随机推荐
- Luncence .Net 使用
public partial class Form1 : Form { public Form1() { InitializeComponent(); } //标准分词 private void bu ...
- 解压zip文件中文文件名乱码问题
主要原因是,在windows下压缩文件时,是以系统的默认编码(gbk,gb18030)来压缩,zip文件并没有声明编码的格式,因此,linux下解压缩时,也会使用系统默认的格式(utf-8)解压缩,编 ...
- IOS - UITableView分批显示数据 实现点击加载更多
Phone屏幕尺寸是有限的,如果需要显示的数据很多,可以先数据放到一个table中,先显示10条,table底部有一察看更多选项,点击察看更多查看解析的剩余数据.基本上就是数据源里先只放10条, 点击 ...
- php与xpath使用操作文本节点
<?php $html="<p> 对于2014年,省统计局的统计分析显示,我省消费流通领域受诸多因素的影响,有机遇也有挑战.但值得注意的是,消费增长还存在不少制约因素,比如 ...
- 25个增强iOS应用程序性能的提示和技巧(高级篇)(2)
25个增强iOS应用程序性能的提示和技巧(高级篇)(2) 2013-04-16 14:56 破船之家 beyondvincent 字号:T | T 在开发iOS应用程序时,让程序具有良好的性能是非常关 ...
- October 5th 2016 Week 41st Wednesday
Don't follow the crowd, let the crowd follow you. 不要随波逐流,要引领潮流. But to be a good follower is already ...
- September 8th 2016 Week 37th Thursday
The secret of high-impact business is early preparation. 高效商务,赢在未雨绸缪. Early and best preparation is ...
- NYOJ题目1102Fibonacci数列
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsQAAAKFCAIAAABEM2gdAAAgAElEQVR4nO3dP1Iqy98H4HcT5i7EmI ...
- NYOJ题目806HEIHEI的心情
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtMAAANRCAIAAACumacBAAAgAElEQVR4nOzdrXLrOrjG8XMT5b2Q4l
- IOS之笑脸app
ios笑脸app实现 import UIKit @IBDesignable class FaceView: UIView { @IBInspectable var lineWidth:CGFloat= ...