AngularJS ng-model 指令

  • ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 代码示例如下：
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

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

<p>使用 ng-model 指令来绑定输入域的值到控制器的属性。</p>

</body>

</html>

双向绑定

双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改： 在中加入表达式{{xxx}} 代码示例如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.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 Doe";

});

</script>

<p>修改输入框的值，标题的名字也会相应修改。</p>

</body>

</html>

验证用户输入

示例代码如下：

<form ng-app="" name="myForm">

    Email:

    <input type="email" name="myAddress" ng-model="text">

    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

</form>

<p>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>

</body>

</html>
  • 以上实例中，提示信息会在 ng-show 属性返回 true 的情况下显示。

应用状态

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

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">

Email:

<input type="email" name="myAddress" ng-model="myText" required>

<p>编辑邮箱地址，查看状态的改变。</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>

</body>

</html>

CSS 类

  • ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

<style>

input.ng-invalid {

    background-color: lightblue;

}

</style>

</head>

<body>

<form ng-app="" name="myForm">

    输入你的名字:

    <input name="myName" ng-model="myText" required>

</form>

<p>编辑文本域，不同状态背景颜色会发送变化。</p>

<p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>

</body>

</html>

AngularJS ng-model 指令的更多相关文章

  1. AngularJS开发指南11：AngularJS的model，controller，view详解

    model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...

  2. 使用Angularjs的ng-cloak指令避免页面乱码

    在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...

  3. 走进AngularJs(五)自定义指令----（下）

    自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...

  4. AngularJS中Directive指令系列 - scope属性的使用

    文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...

  5. Angularjs 动态添加指令并绑定事件

    先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: http://jsbin.com/gajizuyuju/edit?html,js,output var count=0 ...

  6. AngularJs -- 内置指令

    AngularJS提供了一系列内置指令.其中一些指令重载了原生的HTML元素,比如<form>和<a>标签, 当在HTML中使用标签时,并不一定能明确看出是否在使用指令. 其他 ...

  7. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  8. 走进AngularJs(四)自定义指令----（中）

    上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...

  9. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  10. 你知道用AngularJs怎么定义指令吗？

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

随机推荐

  1. 鸿蒙系统开源学习经验分享HarmonyOS[www.allharmonyos.com]

    分享鸿蒙系统开源知识,分享学习经验,分享鸿蒙系统开发经验 www.allharmonyos.com https://gitee.com/allharmonyos https://github.com/ ...

  2. CentOS7 - 安装 VirtualBox

    参考资料 最新的可用安装包可以从这里下载 VirtualBox 是 x86 硬件虚拟化产品,功能上与 VMware Server.KVM.及 Xen 类似,但是 VirtualBox 不修改 Linu ...

  3. PHP获得计算机的唯一标识[cpu,网卡]

    以下是从网上转载来的源码,但是我测试均不能执行,不知道怎么回事,转过来大家可以交流一下 <?php//获取电脑的CPU信息 function OnlyU(){ $a = ''; $b = arr ...

  4. 【C#学习笔记】string.Format对C#字符串格式化

    文章转自:CSDN   http://blog.csdn.net/samsone/article/details/7556781 1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格 ...

  5. 逻辑回归提高阈值对p和r的影响

    这里我做了一个实验 也就是随着阈值的增大,precision增加或者不变,recall减少或者不变.

  6. js实现方块弹珠游戏

    下载地址:https://files.cnblogs.com/files/liumaowu/%E5%BC%B9%E4%B8%80%E5%BC%B9%E6%89%93%E6%96%B9%E5%9D%97 ...

  7. Codeforces - 1088B - Ehab and subtraction - 堆

    https://codeforc.es/contest/1088/problem/B 模拟即可. #include<bits/stdc++.h> using namespace std; ...

  8. 认识Mybatis

    什么是Mybatis? MyBatis 是一款优秀的基于Java的持久层框架(来源于“internet”和“abatis”的组合),它支持定制化 SQL.存储过程以及高级映射. MyBatis 避免了 ...

  9. datagridview里面的checkbox全选和取消全选

    全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...

  10. opencv视频流的读取和处理

    Opencv提供一个简单易用的框架以提取视频文件和USB摄像头中的图像帧,如果只是想读取某个视频,你只需要创建一个VideoCapture实例,然后在循环中提取每一帧.下面是一个简单的代码 #incl ...