08-指令ng-model应用状态

最新推荐文章于 2019-05-07 17:17:47 发布
最新推荐文章于 2019-05-07 17:17:47 发布
阅读量374 收藏
点赞数
分类专栏： angularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gc_20160403/article/details/76034430
版权 
<!--ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="js/angular.js"></script>
    </head>
    <body>
        <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>
    </body>
</html>
jojo999888
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
AngularJS入门（4）---ng-model指令
怕冷的北方姑娘
11-20 238
AngularJS ng-model 指令 AngularJSd的模型（model）实际上就是普通的JS对象，与控制器类似，不需要特别的去扩展任何AngularJS的底层类，也不用去构造（construct）模型对象。 可以在模型层中使用任何当前存在的纯JS的类或对象，模型可拥有的属性也不仅限于原始值，任何有效的JS对象或数组都是可以的。只需要将模型简单的指派给$scope,AngularJS就...
AngularJS基础 ng-if 指令用法
10-21
以下是一个简单的`ng-if`使用例子，展示了如何根据复选框的状态来控制`div`元素的显示和隐藏： ```html <!DOCTYPE html> <meta charset="utf-8"> ...
AngularJS之ng-model指令
牛栏山矿泉水
08-06 110
1、问题背景 ng-model：把元素或变量绑定到应用程序 2、实现实例 &lt;!DOCTYPE html&gt; &lt;html ng-app&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;AngularJS之ng-model命令&lt;/title&gt; &lt;script typ
angular的ng-model指令
lixiaoyan_star的博客
05-07 353
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></scri...
AngularJS ng-model 指令
崔向阳@李晓的博客
07-18 1150
AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 ng-model 指令 ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。 AngularJS 实例 div ng-app="myApp" ng-controller
ng-model指令
monkey_four的专栏
06-15 1121
ng-model指令作用是绑定HTML表单元素到AngularJS应用程序数据中，即$scope变量中． 语法： 其中tag可以是input, select, textarea 如： Name: var app = angular.module("myApp", []); app.controller('myCtrl', function($scope
AngularJS基础 ng-show 指令简单示例
10-21
总的来说，`ng-show`指令是AngularJS中一个强大且灵活的工具，它使开发者能够轻松地实现基于数据状态的界面交互，提高用户体验。在实际开发中，结合其他AngularJS指令，如`ng-repeat`、`ng-click`等，可以构建出复杂...
AngularJS解决ng-if中的ng-model值无效的问题
10-19
然而，当`ng-if`与`ng-model`一起使用时，可能会遇到`ng-model`值无法更新的问题，这是因为`ng-if`创建了一个新的子作用域，导致`ng-model`在某些情况下无法正确地绑定到父作用域的属性。 首先，我们需要理解...
Angular ng-repeat指令实例以及扩展部分
08-31
`Angular ng-repeat`指令是AngularJS中的核心指令之一，用于在HTML模板中循环遍历数组或对象集合，并根据每个元素...在实际开发中，熟练掌握`ng-repeat`的使用能显著提高开发效率，使应用的界面更加动态和交互性强。
AngularJS入门教程之ng-class 指令用法
10-21
其中之一便是`ng-class`指令，这个指令允许我们动态地根据数据模型（model）的状态来改变元素的CSS类。在本文中，我们将深入探讨`ng-class`指令的用法、定义、语法以及实例，帮助初学者更好地理解和应用这个功能。 ...
angular指令笔记ng-options的使用方法
08-29
在AngularJS中，`ng-...同时，通过`ng-model`，我们可以轻松地实现双向数据绑定，使得用户的选择能够立即反映在应用程序的状态中。熟练掌握`ng-options`的使用，将有助于提升AngularJS应用的用户体验和开发效率。
AngularJS使用ng-class动态增减class样式的方法示例
10-19
总结起来，AngularJS的`ng-class`指令为我们提供了极大的灵活性，可以方便地根据数据模型的状态来控制元素的样式。无论是在表单验证中高亮显示错误，还是在用户交互中改变元素的视觉效果，`ng-class`都是一个强大的...
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
10-17
总结来说，这个示例展示了如何使用AngularJS的`ng-show`、`ng-model`、`ng-true-value`和`ng-false-value`指令来根据复选框的状态动态控制内容的显示和隐藏。通过这种方式，我们可以创建响应式、交互式的Web应用程序...
ng-options和ng-checked在表单中的高级运用(推荐)
10-20
在AngularJS中，ng-options和ng-checked是两个非常重要的指令，它们在构建动态表单时起着关键作用。本文将深入探讨这两个指令的高级用法，帮助开发者更好地理解和利用它们的功能。 首先，我们来看ng-options。ng-...
angularjs中ng-attr的用法详解
10-20
这使得我们可以根据应用程序的状态动态地改变元素的外观和行为。 **基本用法** `ng-attr`的基本语法是`ng-attr-<attribute>=<expression>`，其中`<attribute>`是HTML属性名，`<expression>`是一个AngularJS表达式，...
angularjs 指令ng-model
行人事，知天命
01-21 854
ng-model将输入框的值绑定到scope变量中，并且当input输入框的值变化时，也会影响scope变量中，并且当input输入框的值变化时，也会影响scope变量的值 使用： input ng-model="province">
angularJS的ng-model指令
海阔天空
05-09 500
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ng-model指令</title> <script type="text/javascript" src="js/Angular.js"></script> </head> <body> <d
通过 ngModel 跟踪修改状态与有效性验证
assassin_0302的博客
09-21 949
原文章：https://www.angular.cn/guide/forms 通过 ngModel 跟踪修改状态与有效性验证 在表单中使用 ngModel 可以获得比仅使用双向数据绑定更多的控制权。它还会告诉你很多信息：用户碰过此控件吗？它的值变化了吗？数据变得无效了吗？ NgModel 指令不仅仅跟踪状态。它还使用特定的 Angular CSS 类来更新控件，以反映当前状态。 可以利用这些...
在西门子 opcenter页面使用ng-model指令
最新发布
05-26
这个例子中，ng-app 指令定义了一个名为 myApp 的 AngularJS 应用程序，ng-controller 指令指定了一个名为 myCtrl 的控制器。在控制器中，$scope 对象控制了一个名为 username 的数据模型。在 HTML 中，ng-model ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

jojo999888

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

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

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

打赏作者

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

抵扣说明：

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

余额充值