AngularJS入门教程之AngularJS模型  更新时间:2016年04月18日 13:39:31   投稿:mrr   这篇文章主要介绍了AngularJS入门教程之AngularJS模型的相关资料,需要的朋友可以参考下 相关阅读: AngularJS入门教程之AngularJS表达式 AngularJS入门教程之AngularJS指令 在前面表达式和指令的教程中了解到,AngularJS模型(ng-model)可以将HTML输入域中的值与AngularJS创建的变量绑定。 名字: 双向绑定 AngularJS的双向绑定, 是指ng-model与HTML的输入域绑定,同时也与AngularJS的属性绑定,所以当输入域的值改变的时候,AngularJS的属性值也会改变。 名字: 你输入了: {{name}} 修改输入框的值,标题的名字也会相应修改。 应用状态 ng-model 指令可以为应用数据提供状态值 dirty 当数据被修改时状态为TRUE,没有被修改过为FALSE。即使修改为原来的值,也为TRUE。 valid 输入值合法时为TRUE,不合法则为FALSE。 touched 通过触屏点击为TRUE,没有点击为FALSE。 根据状态来应用CSS样式 输入你的名字: input域增加了required状态,当input域没有输入时,ng-model为input域增加ng-invalid样式。反之则删除ng-invalid样式。 ng-model 指令根据表单域的状态添加/移除以下样式: – ng-empty – ng-not-empty – ng-touched – ng-untouched – ng-valid – ng-invalid – ng-dirty – ng-pending – ng-pristine 使用ng-model验证邮箱格式 Email: 不是一个合法的邮箱地址 myForm.myAddress.$error.email属性为TRUE(邮箱格式不正确)时,ng-show会控制span的内容显示出来。 以上内容是小编给大家介绍的AngularJS入门教程之AngularJS模型,希望对大家有所帮助! 您可能感兴趣的文章: AngularJS内置指令 angularjs指令中的compile与link函数详解 angularJS中$apply()方法详解 AngularJs根据访问的页面动态加载Controller的解决方案 jQuery和AngularJS的区别浅析 AngularJS入门教程之学习环境搭建 AngularJS实现表单验证 angularJS中router的使用指南 AngularJS 模型详细介绍及实例代码 angularjs 入门 模型 相关文章 Angular.js指令学习中一些重要属性的用法教程 这篇文章主要给大家介绍了关于Angular.js指令学习中一些重要属性的用法教程,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 2017-05-05 AngularJS中的DOM操作用法分析 这篇文章主要介绍了AngularJS中的DOM操作,较为详细的分析了AngularJS针对DOM操作的原理、实现技巧与相关注意事项,需要的朋友可以参考下 2016-11-11 AngularJs学习第八篇 过滤器filter创建 这篇文章主要介绍了AngularJs学习第八篇 过滤器filter创建的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下 2016-06-06 AngularJS ui-router刷新子页面路由的方法 这篇文章主要介绍了AngularJS ui-router刷新子页面路由的方法,网上虽然有很多种方法,但是都不适合小编,今天小编给大家分享一个还不错的方法,需要的朋友可以参考下 2018-07-07 Angularjs 创建可复用组件实例代码 这篇文章主要介绍了Angularjs 创建可复用组件实例代码的相关资料,需要的朋友可以参考下 2016-10-10 AngularJS HTML编译器介绍 这篇文章主要介绍了AngularJS HTML编译器介绍,AngularJS的HTML编译器能让浏览器识别新的HTML语法。它能让你将行为关联到HTML元素或者属性上,甚至能让你创造具有自定义行为的新元素,需要的朋友可以参考下 2014-12-12 详解支持Angular 2的表格控件 本文主要对支持Angular2的表格控件进行详细介绍。具有一定的参考价值,下面跟着小编一起来看下吧 2017-01-01 Angular2 NgModule 模块详解 这篇文章主要介绍了Angular2 NgModule 模块详解的相关资料,并附简单实例,需要的朋友可以参考下 2016-10-10 AngularJS中取消对HTML片段转义的方法例子 这篇文章主要介绍了AngularJS中取消对HTML片段转义的方法例子,在一些需要显示HTML的地方,就要取消AngularJS的转义,本文就介绍了这种方法,需要的朋友可以参考下 2015-01-01 详解AngularJS 路由 resolve用法 本篇文章主要介绍了AngularJS 路由 resolve用法,详细的介绍了resolve用法,想要了解resolve用法的朋友可以了解一下 2017-04-04 最新评论

相关阅读:

AngularJS入门教程之AngularJS表达式

AngularJS入门教程之AngularJS指令

在前面表达式和指令的教程中了解到,AngularJS模型(ng-model)可以将HTML输入域中的值与AngularJS创建的变量绑定。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="name='Jone Snow'">
名字: <input ng-model="name">
</div>
</body>
</html> 

双向绑定 AngularJS的双向绑定, 是指ng-model与HTML的输入域绑定,同时也与AngularJS的属性绑定,所以当输入域的值改变的时候,AngularJS的属性值也会改变。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Snow";
});
</script>
<p>修改输入框的值,标题的名字也会相应修改。</p>
</body>
</html>

应用状态 ng-model 指令可以为应用数据提供状态值

dirty 当数据被修改时状态为TRUE,没有被修改过为FALSE。即使修改为原来的值,也为TRUE。

valid 输入值合法时为TRUE,不合法则为FALSE。

touched 通过触屏点击为TRUE,没有点击为FALSE。

根据状态来应用CSS样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
</body>
</html> 

input域增加了required状态,当input域没有输入时,ng-model为input域增加ng-invalid样式。反之则删除ng-invalid样式。 ng-model 指令根据表单域的状态添加/移除以下样式: – ng-empty – ng-not-empty – ng-touched – ng-untouched – ng-valid – ng-invalid – ng-dirty – ng-pending – ng-pristine 使用ng-model验证邮箱格式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
</body>
</html> 

myForm.myAddress.$error.email属性为TRUE(邮箱格式不正确)时,ng-show会控制span的内容显示出来。

以上内容是小编给大家介绍的AngularJS入门教程之AngularJS模型,希望对大家有所帮助!

您可能感兴趣的文章:

  • AngularJS内置指令
  • angularjs指令中的compile与link函数详解
  • angularJS中$apply()方法详解
  • AngularJs根据访问的页面动态加载Controller的解决方案
  • jQuery和AngularJS的区别浅析
  • AngularJS入门教程之学习环境搭建
  • AngularJS实现表单验证
  • angularJS中router的使用指南
  • AngularJS 模型详细介绍及实例代码
张贴在3