angular Model 指令

2023-11-18

ng-model指令用于绑定应用程序数据到HTML控制器(input、select、textarea)的值。可以将输入域的值域AngularJS创建的变量绑定;并且支持双向绑定。如下例子:

<div ng-app="myapp" ng-controller="mycontroller">

name:<input ng-model="name">

<h1>you input value is:{{name}}</h1>

</div>

<script>

var app=angular.module('myapp',[]);

app.controller('mycontroller',function($scope){

$scope.name='Qiang Li';

});

</script>

验证用户输入

ng-shw会在返回true的情况下显示。如下例子

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

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

<span ng-show="myform.myAddress.$error.email">invalid</span>

</form>

应用状态

ng-model指令可以为应用程序提供状态值(invalid、dirty、error)

CSS类

ng-model指令基于它们的状态为HTML元素提供了CSS类,可以添加或移除的类有:

ng-empty:

ng-not-empty

ng-touched:用户是否和控件进行了交互、或者是是否失去焦点

ng-untouched:用户是否没有和控件进行了交互、或者是否没有失去焦点

ng-valid:未通过验证的表单;

ng-invalid:表单 是否通过验证

ng-dirty:是否修改了表单

ng-pending:任何满足$asyncValidatorsd情况

ng-pristine:控件是否为初始值

用法如下:

<style>

input.ng-invalid{

background-color:ligthtbule;

}

</style>

<body>

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

the name inputed:<input name="myAddress" ng-model="text" required></input>

</form>

</body>

转载于:https://www.cnblogs.com/VARForrest/p/7773371.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

angular Model 指令 的相关文章

随机推荐

  • 用执行计划看SQL的索引命中情况

    SQL Server查询超时 用执行计划看SQL的索引命中情况 从SQL Server查询语句 查询超时 需要优化 以下只优化方案之一 仅供参考 选中某段SQL后按CTRL L 查看执行计划 找出哪些表用了全局查询 选中某表按ALT F1
  • 数据结构(2)时间复杂度——渐进时间复杂度、渐进上界、渐进下界

    目录 2 1 概述 2 2 时间复杂度的计算 2 2 1 渐进复杂度 2 2 2 渐进上界 2 2 3 渐进下届 2 2 4 复杂度排序 2 2 5 举几个例子 2 1 概述 算法的基本定义 求解问题的一系列计算或者操作 衡量算法性能的指标
  • cuda求矩阵每一行最大值

    2 完成一个尺寸512 512的二维数组的每一行最大值的并行程序实现数据类型设置为float 需要完成4个版本 1 不使用共享内存 只使用全局内存 采用具有分支发散的并行归约 include cuda runtime h include d
  • Spring Cloud OAuth2 搭建授权服务器 + 客户端 + 令牌中继

    SpringBoot 版本2 1 4 RELEASE Spring Cloud版本Greenwich RELEASE 说明 token采用redis存储 用户信息采用数据库存储 oauth2官网整合springboot的例子 含服务端配置和
  • OpenJDK源码阅读-Oop&Klass

    文章目录 oop klass OBJECT hierarchy metadata hierarchy klass hierarchy oop classDiagram description klass classDiagram descr
  • Android Studio 4.0 gradle-6.1.1-all.zip 下载速率太慢或失败解决办法

    今天在家里电脑上新装了Android Studio 4 0 gradlegradle 6 1 1 all zip 下载速度实在是太慢了 后来尝试在https downloads gradle dn com distributions gra
  • python编程语言的优缺点-python语言的特点(优缺点)总结

    BEGIN 优点 1 简单 设计原则 简单 优雅 明确 易于学习 较少的关键字 结构简单 易于阅读 python代码定义更清晰 易于维护 源代码容易维护 2 广泛的开源库 丰富的第三方库 3 互动模式 支持互动模式 可从终端输入执行代码并得
  • 深入理解java反射机制

    一 java的核心机制 java有两种核心机制 java虚拟机 JavaVirtual Machine 与垃圾收集机制 Garbage collection Java虚拟机 是运行所有Java程序的抽象计算机 是Java语言的运行环境 在其
  • 如何学习大数据

    文章目录 每日一句正能量 前言 一 什么是大数据 二 大数据的应用领域 三 社会对大数据的人才需求 四 大数据的学习路线 后记 每日一句正能量 多数人认为 一旦达到某个目标 人们就会感到身心舒畅 但问题是你可能永远达不到目标 把快乐建立在还
  • 看到了一个 蒙特卡洛方法 随机数得出 圆周率的c++ 源码

    package bt6 import java util Random 看到了一个 蒙特卡洛方法 随机数得出 圆周率的c 源码 复制过来 一个Java版的见笑了 author suifeng public class PITest publ
  • sqlmap过SQLi-LABS靶场 11-20关

    第11关 后面基本都是post注入了 不过我们用的是神器sqlmap 我们先随便输入 然后bp抓包 把抓到的包保存问txt格式 然后在sqlmap 指定他 用 r sqlmap py r C Users Administrator Desk
  • 记录shardingsphere 5.0.0的一个问题

    shardingsphere的一个问题 最近shardingsphere更新了5 0 0版本 加入了很多新特性 所以我在自己的练习项目中想启动配置启动一下 但是并不是那么顺利 升级之后就直接无法启动了 根据错误栈提示是找不到一个名为Mode
  • Android studio 模拟器启动黑屏解决办法附图详细

    Android studio 模拟器启动黑屏解决办法附图详细 问题描述 原因分析 android模拟器在创建时 一般默认设置为热启动 所以每次关闭模拟器时 会提示保存当前运行界面状态 若选择取消 则下一次启动会以最近一次保存的状态启动显示
  • Pycharm安装CV2

    1 win r 然后输入cmd进入中端 安装的指令用 pip install opencv python i http mirrors aliyun com pypi simple trusted host mirrors aliyun c
  • husky hooks 不起作用的解决方法

    问题 在项目实际应用过程中遇到过一次 husky hooks 不生效的问题 这里记录下 问题表现 问题比较直观 通过 huksy install 之后 git commit 时 pre commit 设置的 hooks 不起作用 重新安装
  • 最详细的Vivado安装教程

    V i v a d o 安 装
  • Date类型与字符串的相互转换

    Date时间类型与字符串的相互转换 Test public void date throws ParseException 一 Date时间类型转字符串 1 获取当前时间 Date date new Date 2 设定时间格式 下面两行可以
  • 2017蓝桥杯C++A组题解集合

    总结 蓝桥杯的题目大多数都是暴利或者dfs bfs解出来的 注意往这上面思考 下面是赛题的链接 https wenku baidu com view 951dab772a160b4e767f5acfa1c7aa00b52a9d2d html
  • 程序发生run time error原因及解决方案

    程序发生run time error原因及解决方案 runtime error现象即产生原因 属于运行时错误 当程序运行到一半 程序发生崩溃 1 数组过小 2 除数为零 3 大数组定义在函数内 4 指针越界 5 还有可能是程序抛出了未接收的
  • angular Model 指令

    ng model指令用于绑定应用程序数据到HTML控制器 input select textarea 的值 可以将输入域的值域AngularJS创建的变量绑定 并且支持双向绑定 如下例子 div name div