参考手册
AngularJS 指令
AngularJS 数据绑定

AngularJS ng-model 指令

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

ng-model 指令

使用 ng-model 指令，可以将输入字段的值绑定到 AngularJS 中创建的变量。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  7. Name: <input ng-model="name">
  8. </div>
  10. <script>
  11. var app = angular.module('myApp', []);
  12. app.controller('myCtrl', function($scope) {
  13.     $scope.name = "John Doe";
  14. });
  15. </script>
  17. <p>使用 ng model 指令将输入字段的值绑定到控制器中创建的属性。</p>
  19. </body>
  20. </html>
运行一下

双向绑定

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

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  7. 名称: <input ng-model="name">
  8. <h1>您输入: {{name}}</h1>
  9. </div>
  11. <script>
  12. var app = angular.module('myApp', []);
  13. app.controller('myCtrl', function($scope) {
  14.     $scope.name = "John Doe";
  15. });
  16. </script>
  18. <p>更改输入字段中的名称，您将看到标题中的名称相应地更改。</p>
  20. </body>
  21. </html>
运行一下

验证用户输入

The ng-model directive can provide type validation for application data (number, e-mail, required):

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <form ng-app="" name="myForm">
  7.     Email:
  8.     <input type="email" name="myAddress" ng-model="text">
  9.     <span ng-show="myForm.myAddress.$error.email">非法邮件地址</span>
  10. </form>
  12. <p>在输入字段中输入您的电子邮件地址。如果输入的不是电子邮件格式，AngularJS 将显示错误消息。</p>
  14. </body>
  15. </html>
运行一下

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

如果 ng-model 属性中的属性不存在，AngularJS 将为您创建一个。

应用程序状态

ng-model 指令可以提供应用程序数据的状态（invalid、dirty、touched、error）：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
  8. Email:
  9. <input type="email" name="myAddress" ng-model="myText" required="">
  10. <p>编辑电子邮件地址，并尝试更改状态。</p>
  11. <h2>状态</h2>
  12. <p>Valid: {{myForm.myAddress.$valid}} (如果为 true，则该值满足所有条件).</p>
  13. <p>Dirty: {{myForm.myAddress.$dirty}} (如果为 true，则该值已更改).</p>
  14. <p>Touched: {{myForm.myAddress.$touched}} (如果为 true，那么这个输入框已聚焦).</p>
  16. </form>
  18. </body>
  19. </html>
运行一下

CSS 样式表

ng-model 指令为 HTML 元素提供 CSS 样式表名，具体取决于它们的状态:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <style>
  5. input.ng-invalid {
  6.     background-color: lightblue;
  7. }
  8. </style>
  9. <body>
  11. <form ng-app="" name="myForm">
  12.     输入您的名称:
  13.     <input name="myName" ng-model="myText" required="">
  14. </form>
  16. <p>编辑文本字段，它将根据状态 获得/移除 样式表。</p>
  17. <p><b>备注:</b> 带有 "required" 属性的文本字段为空时无效。</p>
  19. </body>
  20. </html>
运行一下

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

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine
AngularJS 指令
AngularJS 数据绑定

分类导航