AngularJS ng-model 指令

ng-model 指令将 HTML 控件（输入、选择、文本区域）的值绑定到应用程序数据。

ng-model 指令

随着ng-model您可以将输入字段的值绑定到 AngularJS 中创建的变量。

示例

<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>

亲自试一试 »

双向绑定

绑定是双向的。如果用户更改输入字段内的值，AngularJS 属性也会更改其值：

示例

<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>

亲自试一试 »

验证用户输入

这个ng-model指令可以为应用程序数据提供类型验证（号码、电子邮件、必填）：

示例

<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

亲自试一试 »

在上面的示例中，仅当表达式中的表达式时才会显示跨度ng-show属性返回true。

如果该房产位于ng-model属性不存在，AngularJS 会为你创建一个。

申请状态

这个ng-model指令可以提供应用程序数据的状态（有效、脏、接触、错误）：

示例

<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
  Email:
  <input type="email" name="myAddress" ng-model="myText" required>
  <h1>Status</h1>
{{myForm.myAddress.$valid}}
  {{myForm.myAddress.$dirty}}
  {{myForm.myAddress.$touched}}
</form>

亲自试一试 »

CSS 类

这个ng-model指令根据 HTML 元素的状态提供 CSS 类：

示例

<style>

input.ng-invalid {
background-color: lightblue;
}

</style>
<body>

<form ng-app="" name="myForm">
Enter your name:
<input name="myName" ng-model="myText" required>
</form>

亲自试一试 »

这个ng-model指令根据表单字段的状态添加/删除以下类：

ng-空
ng-非空
ng-touched
ng-未触及
ng-有效
ng-无效
ng-脏
待处理
原始的