文档章节

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

恋空御月
 恋空御月
发布于 2016/05/27 15:20
字数 549
阅读 282
收藏 0

AngularJS ng-model 指令


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


ng-model 指令

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

AngularJS 实例

<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>


尝试一下 »


双向绑定

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

AngularJS 实例

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


尝试一下 »


验证用户输入

AngularJS 实例

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-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 实例

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
    Email:
    <input type="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>

<form ng-app="" name="myForm">
    输入你的名字:
    <input name="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

© 著作权归作者所有

恋空御月
粉丝 8
博文 137
码字总数 91979
作品 0
浦东
程序员
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
189
0
【MVVM】- AngularJS基础学习

Angular JS ---- AngularJS 基础入门案例 外观页面 AngularJS 模块 模块是应用控制器的容器,Angularjs代码依赖Jquery,在使用angualrjs代码时,Jquery脚本文件须在AngularJS脚本之前加载,此...

ZeroneLove
02/27
30
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
309
2
Angular 1 和 Angular 2 集成:无缝升级的方法

已经有了 Angular 1 应用程序,正在想着怎么把它升级到 Angular 2?看看我们是怎么样支持递增升级的。 摘要 好消息。 我们计划在同一应用程序上允许 Angular 1 和 Angular 2 混合使用 你可以...

oschina
2015/08/27
9.1K
13
Angular 中得 scope 作用域梳理

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同...

顽Shi
2014/09/21
9.4K
2

没有更多内容

加载失败,请刷新页面

加载更多

[转] Java 无界阻塞队列 DelayQueue 入门实战

原文出处:http://cmsblogs.com/ 『chenssy』 DelayQueue是一个支持延时获取元素的无界阻塞队列。里面的元素全部都是“可延期”的元素,列头的元素是最先“到期”的元素,如果队列里面没有元...

泥瓦匠BYSocket
18分钟前
5
0
zk中集群版中角色和消息类型

服务器角色 LEADER LEARNER FOLLOWING OBSERVER 消息类型 数据同步 服务器初始化 请求处理型 会话管理型 LEADER 集群工作核心,作用有: 1事务请求唯一调度和处理者,保证事务处理顺序性 2集...

writeademo
20分钟前
3
0
阿里云推送的基本使用-Swift;iOS10+

func initCloudPush(){ CloudPushSDK.asyncInit("*****", appSecret: "*******") { (result) in if result!.success{ print("deviceId===......

west_zll
32分钟前
3
0
分布式及高可用元数据采集原理

转载本文需注明出处:微信公众号EAWorld,违者必究。 引言: 元数据采集是元数据产品的核心部分,如何提升采集效率是需要仔细斟酌的事情,既要保持稳定性也要保持跟上主流技术的发展趋势。元...

EAWorld
47分钟前
5
0
为构建社交关系链手淘都做了啥?

作者|王卫(泓冰) 出品|阿里巴巴新零售淘系技术部 01、淘宝社交关系推荐的背景 1、互联网下半场到来:互联网的下半场,人口红利消失,各大平台需要对用户做精细化运营,用户的增长和留存是每一...

阿里云官方博客
48分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部