ylbtech-AngularJS-Runnob:模型
1.返回顶部
1、

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 的情况下显示


应用状态

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
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

AngularJS:模型的更多相关文章

  1. AngularJS模型

    1. AngularJS模型主要就是使用的AngularJS的ng-model指令. ng-model指令可以将输入域的值与 AngularJS 创建的变量绑定. <!DOCTYPE html& ...

  2. AngularJS 模型

    ng-model 指令将HTML 控制器(input, select, textarea)的值 和 应用程序数据进行绑定. ng-model 指令 ng-model 指令可以将输入域的值与 Angul ...

  3. AngularJS模型 ng-model 指令

    ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定.例 ...

  4. AngularJS学习之旅—AngularJS 模型(四)

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

  5. AngularJs之三

    一.angularJs的指令模型ng-model指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. 为应用程序数据提供类型验证(number.email.required).为应用程 ...

  6. angularJS(3)

      angularJS(3) 一.angularJs的指令模型ng-model指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. 为应用程序数据提供类型验证(number.email ...

  7. AngularJS Bootstrap

    AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...

  8. 1.AngularJS初探

    1.需要什么前端开发环境 1)代码编辑工具 webstorm 2)断点调试工具 chrome插件Batarang 3)版本管理 tortoiseGit 4)代码合并和混淆工具 grunt-contri ...

  9. AngularJS安装配置与基础概要整理(上)

    以前整理的,可供参考. 安装: 1.首先要安装node.js和它的npm包管理系统.(nodejs相关待整理) 2.安装grunt .grunt是一个基于任务的Javascript工程命令行构建工具. ...

  10. angularjs基础——变量绑定

    1)弄一个ng-app(angularjs 应用) 2)在里面用ng-model(angularjs 模型)就可以定义一个模型变量 3)使用模版方法就可以输出变量了(例如:{{name}}) 示例: ...

随机推荐

  1. s​h​e​l​l​中​条​件​判​断​i​f​中​的​-​z​到​-​d​

    shell中条件判断if中的-z到-d的意思 2011-09-05 10:30 [ -a FILE ] 如果 FILE 存在则为真. [ -b FILE ] 如果 FILE 存在且是一个块特殊文件则为 ...

  2. iOS-证书真机调试

    开发者账号分类 个人的 99$  申请简单,付钱就行,688人民币   企业的 99$  申请复杂,需要“邓白氏”认证,可以确认企业是合法有效的 可以管理团队开发   商业的 299$  也需要邓白氏 ...

  3. TI IPNC Web网页之GoDB开发环境

    介绍 下面介绍DM8127/DM385 IPNC RDK中网页制作相关的东东. 具体来说,各位获得这个RDK包时有以下文件: IPNC_RDK_DM812x_DM385_Version3.5.0.ta ...

  4. Android的布局方式

    1.LinearLayout(线性布局) android:orientation="vertical" //布局 android:layout_width="wrap_c ...

  5. 《Drools7.0.0.Final规则引擎教程》第3章 3.2 KIE概念&FACT对象

    3.2.1 什么是KIE KIE(Knowledge Is Everything),知识就是一切的简称.JBoss一系列项目的总称,在<Drools使用概述>章节已经介绍了KIE包含的大部 ...

  6. HDU - 5829:Rikka with Subset (NTT)

    As we know, Rikka is poor at math. Yuta is worrying about this situation, so he gives Rikka some mat ...

  7. 剑指offer-第七章面试案例1(字符串转换为整型)

    //将字符串转换为整型 //思路:特殊的输入测试: //1,考虑字符串是否为空.2.字符串问空的时候的返回0,和真实的返回0直键的区别.3,字符串中出现0~9的字符处理 //4.字符串中出现*,¥等一 ...

  8. jfrog artifactory docker 安装试用

    预备环境(docker 安装模式,使用的免费版本): docker-ce (启用镜像加速) 1. 镜像拉取 docker.bintray.io/jfrog/artifactory-oss 2. 启动 ...

  9. vue router 传参 获取不到query,params

    千万要注意,获取query/params 是this.$route.query 不是this.$router.query!!!

  10. Maven无法上传到到私服

    在pom.xml中插入如下代码: <distributionManagement> <repository> <id>nexus</id> <ur ...