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的代码片段,通常放置在绑定 ...
随机推荐
- shell 脚本编程概述
环境变量 ? 退出状态码 (成功) (未知错误) (误用 shell 命令) (命令不可执行) (没找到命令) (无效退出状态) +x( linux 信号 X 的严重错误) ( ctrl c 终止程序 ...
- mybatis参数错误 Parameter '×××' not found. Available parameters are [0, 1, param1, param2]
报错的代码 @Update("update staff_info set ApplyState = #{applyState} where Id = #{userId}") int ...
- 【编程题目】请修改 append 函数，利用这个函数实现两个非降序链表的并集
42.请修改 append 函数,利用这个函数实现(链表):两个非降序链表的并集,1->2->3 和 2->3->5 并为 1->2->3->5另外只能输出结 ...
- struts2截取字符串
<struts:if test="null!=pushAd&&pushAd.length()>14"> <struts:property v ...
- chaper3_exerise_UVa455_周期串
#include<iostream> #include<cstring> #include<stdio.h> using namespace std; ; int ...
- 项目配置laungchImage
- Android 图片闪烁(延迟切换)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...
- codevs 2851 菜菜买气球
dp加二分法 链接:http://codevs.cn/problem/2851/ #include<iostream> #include<vector> #include< ...
- SQLSERVER查询连接数
SELECT * FROM [Master].[dbo].[SYSPROCESSES] WHERE [DBID] IN (SELECT [DBID]FROM [Master].[dbo].[SYSDA ...
- Pyqt 获取windows系统中已安装软件列表
开始之前的基础知识 1. 获取软件列表 在Python的标准库中,_winreg可以操作Windows的注册表.获取已经安装的软件列表一般是读去windows的注册表: SOFTWARE\Micros ...