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学习之模型的更多相关文章

  1. 我的AngularJS 学习之旅

    我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就 ...

  2. AngularJs学习总结－了解基本特性（－）

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  3. Angularjs学习---官方phonecat实例学习angularjs step0 step1

    接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...

  4. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  5. 推荐10个很棒的AngularJS学习指南

    AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...

  6. Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结

    karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...

  7. [整理]AngularJS学习资源

    https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...

  8. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  9. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

随机推荐

  1. codeforces 499A.Inna and Pink Pony 解题报告

    题目链接:http://codeforces.com/problemset/problem/499/A 题目意思:有两种按钮:1.如果当前观看的时间是 t,player 可以自动处理下一分钟,姑且理解 ...

  2. Bootstrap弹窗插件（拟态框）关闭后回调函数

    $(function(){ $('#questionnaire').on('hidden.bs.modal',function(){ //清除缓存方法 }); }); 事件 Bootstrap 的模态 ...

  3. Json数据报错

    在Json数据解析的时候报错,如下图: 这里的id,code,A1等等,都应该使用双引号,即:"id","code","A1",假如id后面 ...

  4. Hibernate创建hqll时报错

    Hibernate 问题,在执行Query session.createQuery(hql) 报错误 出错截图: 这条语句在java运行环境下,直接连数据库不出错,如果在hiberante,strut ...

  5. SQL Server output经典使用

    output经典使用 分类: sql2012-02-16 18:17 409人阅读 评论(0) 收藏 举报 outputinserttabledeletegonull OUTPUT是SQL SERVE ...

  6. [Android Pro] svn实例

    referece : http://www.cnblogs.com/cnblogsfans/archive/2010/03/21/1690891.html 签出 svn checkout URL pa ...

  7. hdu1722(gcd)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1722 题意:要使一块蛋糕既能均分给a个人,又能均分给b个人,问至少需要分成几块(不需要每块都一样大小) ...

  8. Hibernate中一对多和多对一关系

    1.单向多对一和双向多对一的区别? 只需要从一方获取另一方的数据时 就使用单向关联双方都需要获取对方数据时 就使用双向关系 部门--人员 使用人员时如果只需要获取对应部门信息(user.getdept ...

  9. 并发用户数与 TPS 之间的关系

    1.  背景 在做性能测试的时候,很多人都用并发用户数来衡量系统的性能,觉得系统能支撑的并发用户数越多,系统的性能就越好:对TPS不是非常理解,也根本不知道它们之间的关系,因此非常有必要进行解释. 2 ...

  10. EF – 1.模式

      3种数据库 code first model first database first       创建EF http://www.cnblogs.com/tangge/p/3834578.htm ...