AngularJS 学习笔记---AngularJS 模型(ng-model 指令)

AngularJSng-model 指令


ng-model 指令用于绑定应用程序数据到 HTML 控制器(input,select,textarea)的值。


ng-model 指令

ng-model指令可以将输入域的值与 AngularJS 创建的变量绑定。

AngularJS 实例

<divng-app="myApp"ng-controller="myCtrl">
名字:<inputng-model="name">
</div>

<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
$scope.name = "John Doe";
});
</script>


尝试一下 »


双向绑定

双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改

AngularJS 实例

<divng-app="myApp"ng-controller="myCtrl">
名字:<inputng-model="name">
<h1>你输入了:{{name}}</h1>
</div>


尝试一下 »


验证用户输入

AngularJS 实例

<formng-app=""name="myForm">
Email:
<inputtype="email"name="myAddress"ng-model="text">
<spanng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>


尝试一下 »

以上实例中,提示信息会在ng-show属性返回true的情况下显示

ps:

HTML 5 <input> type 属性

定义和用法

type 属性规定 input 元素的类型。

注释:该属性不是必需的,但是我们认为您应该始终使用它。

email 定义用于 e-mail 地址的文本字段

输入类型 - email

email 输入类型用于应该包含电邮地址的输入字段。

当提交表单时,会自动地对 email 字段的值进行验证。

实例

E-mail: <input type="email" name="user_email" />

亲自试一试

提示:iPhone 的 Safari 浏览器会识别 email 输入类型,然后改变触摸屏的键盘来适应它(添加 @ 和 .com 选项)。

http://www.w3school.com.cn/html5/att_input_type.asp

BTW,熟悉html5的人应该都知道,我是专门去查了一下,感觉还是很强大的,这在以前都是通过js去做的,html5已经实现了


应用状态

ng-model指令可以为应用数据提供状态值(invalid,dirty,touched,error):

AngularJS 实例

<formng-app=""name="myForm"ng-init="myText = 'test@runoob.com'">
Email:
<inputtype="email"name="myAddress"ng-model="myText"required></p>
<h1>状态</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>


尝试一下 »


CSS 类

ng-model指令基于它们的状态为 HTML 元素提供了 CSS 类:

AngularJS 实例

<style>

input.ng-invalid{
background-color:lightblue;
}

</style>
<body>

<formng-app=""name="myForm">
输入你的名字:
<inputname="myAddress"ng-model="text"required>
</form>


尝试一下 »

ng-model指令根据表单域的状态添加/移除以下类:

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...