09-指令ng-model-CSS类

最新推荐文章于 2019-12-27 11:49:44 发布
最新推荐文章于 2019-12-27 11:49:44 发布
阅读量605 收藏 1
点赞数
分类专栏： angularJS 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gc_20160403/article/details/76034441
版权 

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

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

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

ng-invalid:未通过验证的表单

ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true

ng-dirty:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

ng-touched:布尔值属性，表示用户是否和控件进行过交互

ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

-->
<!DOCTYPE html>
<html lang="en" ng-app="">
    <head>
        <meta charset="utf-8">
        <script src="js/angular.js"></script>
        <style>
            input.ng-invalid {
                background-color: lightblue;
            }
        </style>
    </head>
    <body>
        <form ng-app="" name="myForm">
            输入你的名字:
            <input name="myAddress" ng-model="text" required>
        </form>
    </body>
</html>
jojo999888
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
AngularJS ng-model 指令
dbq28902的博客
10-10 76
AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 代码示例如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="ht...
Angular中ng-model指令根据表单域状态添加css类的“空格”问题
weixin_33955681的博客
11-30 300
为什么80%的码农都做不了架构师？>>> ...
AngularJS—ng-model指令
KrissLong的博客
04-17 806
ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 <div ng-app="myApp" ng-controller="myCtrl"> 名字：<input ng-model="name"> </div> <script> var app=angul...
AngularJS基础 ng-if 指令用法
11-29
这与`ng-hide`指令有所不同，`ng-hide`只是改变CSS的`display`属性，使元素不可见，但元素仍然存在于DOM树中。 在给定的实例中，我们看到一个简单的AngularJS应用： ```html <!DOCTYPE html> ...
AngularJS解决ng-if中的ng-model值无效的问题
10-19
然而，当`ng-if`与`ng-model`一起使用时，可能会遇到`ng-model`值无法更新的问题，这是因为`ng-if`创建了一个新的子作用域，导致`ng-model`在某些情况下无法正确地绑定到父作用域的属性。 首先，我们需要理解...
AngularJS入门教程之ng-class 指令用法
10-21
其中之一便是`ng-class`指令，这个指令允许我们动态地根据数据模型（model）的状态来改变元素的CSS类。在本文中，我们将深入探讨`ng-class`指令的用法、定义、语法以及实例，帮助初学者更好地理解和应用这个功能。 ...
ng-model指令使用场景
qq_21119289的博客
12-22 946
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
empty-ng
03-30
InsDemo 该项目是使用版本11.0.5生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test以通过执行单元测试。 运行端到端测试 运行ng e2e通过执行端到端测试。 进一步的帮助 要获得有关Angular CLI的更多帮助，请使用ng help或查看“ 页面。
AngularJS 学习笔记---AngularJS 模型（ng-model 指令）
chuyi0194的博客
05-27 167
AngularJSng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 ng-model 指令 ng-model指令可以将输入域的值与 AngularJS 创建的变量绑定。 An...
表单常用的angular指令
lixiaoyan_star的博客
05-07 206
ng-model 指令根据表单域的状态添加/移除以下类： 1.input为为空的时候ng-empty 2.input不为空的时候ng-not-empty 3.控件已失去焦点ng-touched 4.控件未失去焦点的时候ng-untouched 5.验证通过ng-valid 6.验证失败ng-invalid 7.控件输入值已变更ng-dirty 8.ng-pristine控件为初始状态 9.ng-p...
ng-model的用法
weixin_30722589的博客
02-28 228
参考： http://www.cnblogs.com/guanglin/p/5200097.html http://www.runoob.com/angularjs/ng-ng-cloak.html ng-model、ng-bind、{{}} ==》 ng-model，一般用于输入标签，实现数据的双向绑定； ng-bind、{{}}有异曲同工之妙，均可用于实现数据的展示；ng-b...
ajax为pending状态的原因
aliven1的博客
12-10 2万+
可能是后台while循环一直没有结束，导致前端ajax请求不进去，线程被占用，所以一直是pending状态
angular的表单验证中样式的变化对比
hgd95的博客
03-22 564
脚本页面如下： <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="utf-8"> <title>表单验证</title> <script type="text/javasc...
angular修改标签css修改的三种方法
u011740841的专栏
08-22 1万+
q
请求被pending，pending是什么意思?
热门推荐
weixin_42046751的博客
12-27 4万+
在Chrome DevTools 开发者工具窗口中，请求被“pending”是什么意思? pending（挂起）：网络处于挂起状态，指发送的请求是“进行中”的状态，但还没有接到服务端的响应。（这类似于debug模式下加断点，请求被阻止住一样） 一旦服务端做出响应，时间将被更新为总运行时间。 .........
angular实现将三目运算写入HTML中
web前端开发
07-07 7566
////////数据来源:module.enable由后台循环生成，默认显示0或1          给span标签绑定ng-bind="module.name"，优于{{module.name}}，避免页面初始加载出现{{}}
在西门子 opcenter页面使用ng-model指令
最新发布
05-26
在 Siemens Opcenter 页面中使用 ng-model 指令，需要先引入 AngularJS 库。然后，在 HTML 元素中使用 ng-model 指令来绑定数据模型并实现双向数据绑定。具体步骤如下： 1. 在 HTML 页面中引入 AngularJS 库，可以使用如下代码： ```html <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> ``` 2. 在 HTML 元素中使用 ng-model 指令来绑定数据模型，例如： ```html <input type="text" ng-model="username"> ``` 这个例子中，ng-model 指令绑定了一个叫做 username 的数据模型，并将其与一个文本框进行了关联。 3. 在 JavaScript 中，可以使用 $scope 对象来控制 ng-model 指令所绑定的数据模型。例如： ```javascript var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.username = "John Doe"; }); ``` 这个例子中，$scope 对象控制了一个叫做 username 的数据模型，并将其初始化为 "John Doe"。 4. 最后，在 HTML 元素中使用 ng-controller 指令来指定控制器，例如： ```html <div ng-app="myApp" ng-controller="myCtrl"> <input type="text" ng-model="username"> <p>Hello {{ username }}!</p> </div> ``` 这个例子中，ng-app 指令定义了一个名为 myApp 的 AngularJS 应用程序，ng-controller 指令指定了一个名为 myCtrl 的控制器。在控制器中，$scope 对象控制了一个名为 username 的数据模型。在 HTML 中，ng-model 指令将文本框与 username 数据模型进行了绑定，同时使用 {{ }} 语法来显示数据模型的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jojo999888

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值