angularJS的ng-model指令

来源：互联网发布：虚拟机里安装linux 编辑：程序博客网时间：2024/05/20 23:07
以下代码可直接复制保存为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>
0 0