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的代码片段,通常放置在绑定 ...
随机推荐
- linux 配置tomcat运行远程监控(JMX)
在实际使用中,我们经常要监控tomcat的运行性能.需要配置相应的参数提供远程连接来监控tomcat服务器的性能.本文详细介绍如何一步一步的配置tomcat相应参数.允许远程连接监控. 工具/原料 v ...
- HTML表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- eclipse svn设置忽略文件
- 数据库TSQL语句
一.创建数据库create database test3;二.删除数据库drop database test3;三.如何创建表create(创建) table(表) test(表名)(此处写列 var ...
- AngularJS 控制器 ng-controller
AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 应用程序被控制器控制. ng-contro ...
- mysql入门语句10条
1,连接数据库服务器 mysql -h host -u root -p xxx(密码) 2,查看所有库 show databases; 3,选库 use 库名 4,查看库下面的表 show ...
- MVC - 10.CodeFrist
微软示例 1.(对新数据库使用 Code First):http://msdn.microsoft.com/zh-cn/data/jj193542 2.(连接和模型):http://msdn.micr ...
- 微软MSMQ消息队列的使用
首先在windows系统中安装MSMQ 一.MSMQ交互 开发基于消息的应用程序从队列开始.MSMQ包含四种队列类型: 外发队列:消息发送到目的地之前,用它来临时存储消息. 公共队列:在主动目录中公布 ...
- SQL索引及视图常用语法
ALTER TABLE department ADD INDEX dept_name_idx (name); SHOW INDEX FROM department \G ALTER TABLE dep ...
- Visual Studio 2015的Web扩展包
过去几年,Visual Studio扩展功能生态系统得到了蓬勃发展,社区贡献出了大量优秀的扩展,其中也包括大量针对Web开发的扩展.但是很多时候,感觉寻找.安装.更新好 几个扩展,总显得比较麻烦.如果 ...