AngularJS ng-model 指令

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input,

select, textarea)的值。

<code>ng-model</code> 指令可以将输入域的值与 AngularJS 创建的变量绑定。

&lt;div ng-app="myApp" ng-controller="myCtrl"&gt;

    名字:

&lt;input ng-model="name"&gt;

&lt;/div&gt;

&lt;script&gt;

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

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

    $scope.name

= "John Doe";

});

&lt;/script&gt;

双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：

    &lt;h1&gt;你输入了: {{name}}&lt;/h1&gt;

&lt;form ng-app="" name="myForm"&gt;

    Email:

&lt;input type="email" name="myAddress" ng-model="text"&gt;

&lt;span ng-show="myForm.myAddress.$error.email"&gt;不是一个合法的邮箱地址&lt;/span&gt;

&lt;/form&gt;

以上实例中，提示信息会在 <code>ng-show</code> 属性返回 <code>true</code> 的情况下显示。

<code>ng-model</code> 指令可以为应用数据提供状态值(invalid,

dirty, touched, error):

&lt;form ng-app="" name="myForm" ng-init="myText = '[email protected]'"&gt;

Email:

&lt;input type="email" name="myAddress" ng-model="myText" required&gt;

&lt;p&gt;编辑邮箱地址，查看状态的改变。&lt;/p&gt;

&lt;h1&gt;状态&lt;/h1&gt;

&lt;p&gt;Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。&lt;/p&gt;

&lt;p&gt;Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。&lt;/p&gt;

&lt;p&gt;Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。&lt;/p&gt;

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

&lt;style&gt;

input.ng-invalid {

    background-color:

lightblue;

}

&lt;/style&gt;

&lt;body&gt;

输入你的名字:

&lt;input name="myAddress" ng-model="text" required&gt;

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

ng-empty

ng-not-empty

ng-touched

ng-untouched

ng-valid

ng-invalid

ng-dirty

ng-pending

ng-pristine