angularJS的ng-model指令

最新推荐文章于 2020-07-30 13:35:00 发布

梦无悔

最新推荐文章于 2020-07-30 13:35:00 发布

阅读量570

点赞数

CC 4.0 BY-SA版权

分类专栏： java web 插件框架 angularjs 文章标签： anjularJS

本文链接：https://blog.youkuaiyun.com/u014444571/article/details/71480401

angularjs 同时被 3 个专栏收录

6 篇文章

订阅专栏

java web

3 篇文章

订阅专栏

插件框架

3 篇文章

订阅专栏

本文介绍 AngularJS 中 ng-model 指令的使用方法及其在表单验证中的作用。ng-model 可实现数据的双向绑定，并提供丰富的状态信息如 valid、dirty 和 touched 等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下代码可直接复制保存为HTML文档查看效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ng-model指令</title>
        <script type="text/javascript" src="js/Angular.js"></script>
    </head>
    <body>
        <div ng-app="modelApp" ng-controller="modelController">
            请输入你的名字：<input type="text" ng-model="name" /><br/>

            你输入的名字是{{name}}


            <h4>验证输入：</h4>
            <form name="myForm">
             Email:
                <input type="email" name="myAddress" ng-model="text">
                <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
            </form>
            <h4>应用状态</h4>
            <form  name="myForms" ng-init="myText = 'test@runoob.com'">
                Email:
                <input type="email" name="mddress" ng-model="myText" required><br />
                <h1>状态</h1>
                验证是否通过：{{myForms.mddress.$valid}}  <br />
                表单或者输入框有没使用{{myForms.mddress.$dirty}}<br />
                是否通过触屏 {{myForms.mddress.$touched}}<br />
                错误信息：{{myForms.mddress.$error}}<br />
            </form>
            <style>
                #cForm input.ng-invalid {
                    background-color: black;
                }
                #cForm input.ng-dirty {
                    background-color: red;
                }

                #cForm input.ng-untouched {
                    background-color: blue;
                }

                #cForm input.ng-empty {
                    background-color: green;
                }
            </style>
            <h4>状态改变事件</h4>
            <form name="cForm" id="cForm">
                myEamil:<input type="email" name="myEamil" id="myEamil" ng-model="myEamil" required><br />
            </form>
            <script>
                var app = angular.module("modelApp",[]);
                app.controller("modelController",function($scope){
                    $scope.name = "join";
                })
            </script>


        </div>
        <div>
            <h3>ng-model 指令</h3>
            ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。<br/>
            双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：<br/>
            ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):<br/>
            ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：<br/>
            ng-model 指令根据表单域的状态添加/移除以下类：<br/>
                -->ng-empty<br/>
                -->ng-not-empty<br/>
                -->ng-touched<br/>
                -->ng-untouched<br/>
                -->ng-valid<br/>
                -->ng-invalid<br/>
                -->ng-dirty<br/>
                -->ng-pending<br/>
                -->ng-pristine<br/>
        </div>
    </body>
</html>