参考手册
AngularJS 事件
AngularJS 表单验证

AngularJS 表单

AngularJS 中的表单提供输入控件的数据绑定和验证。

输入控件

输入控件是 HTML 输入元素:

  • input 元素
  • select 元素
  • button 元素
  • textarea 元素

数据绑定

输入控件通过使用 ng-model 指令提供数据绑定。

  1. <input type="text" ng-model="firstname">

应用程序现在有一个名为 firstname 的属性。

ng-model 指令将输入控制器绑定到应用程序的其余部分。

属性 firstname 可以在控制器中引用:

实例
  1. <!DOCTYPE html>
  2. <html lang="en">
  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="formCtrl">
  7.   <form>
  8.     First Name: <input type="text" ng-model="firstname">
  9.   </form>
  10. </div>
  12. <script>
  13. var app = angular.module('myApp', []);
  14. app.controller('formCtrl', function($scope) {
  15.     $scope.firstname = "John";
  16. });
  17. </script>
  19. </body>
  20. </html>
运行一下

它也可以在应用程序的其他地方引用:

实例
  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="">
  7.   <form>
  8.     姓氏: <input type="text" ng-model="firstname">
  9.   </form>
  10.   <h2>你输入: {{firstname}}</h2>
  11. </div>
  13. <p>更改输入字段中的名称，您将看到标题中的名称相应地更改。</p>
  15. </body>
  16. </html>
运行一下

Checkbox

复选框的值为 true 或 false。将 ng-model 指令应用于复选框，并在应用程序中使用其值。

实例

如果选中复选框，则显示标题:

  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="">
  7.   <form>
  8.     选中以显示标题:
  9.     <input type="checkbox" ng-model="myVar">
  10.   </form>
  11.   <h2 ng-show="myVar">我的标题</h2>
  12. </div>
  14. <p>选中复选框时，标题的 ng-show 属性设置为 true。</p>
  16. </body>
  17. </html>
运行一下

Radiobuttons

Bind radio buttons to your application with the ng-model directive.

Radio buttons with the same ng-model can have different values, but only the selected one will be used.

  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 ng-app="">
  6. <form>
  7.   Pick a topic:
  8.   <input type="radio" ng-model="myVar" value="dogs">Dogs
  9.   <input type="radio" ng-model="myVar" value="tuts">Tutorials
  10.   <input type="radio" ng-model="myVar" value="cars">Cars
  11. </form>
  13. <div ng-switch="myVar">
  14.   <div ng-switch-when="dogs">
  15.      <h2>Dogs</h2>
  16.      <p>Welcome to a world of dogs.</p>
  17.   </div>
  18.   <div ng-switch-when="tuts">
  19.      <h2>Tutorials</h2>
  20.      <p>Learn from examples.</p>
  21.   </div>
  22.   <div ng-switch-when="cars">
  23.      <h2>Cars</h2>
  24.      <p>Read about cars.</p>
  25.   </div>
  26. </div>
  28. <p>ng-switch指令根据单选按钮的值隐藏和显示 HTML 部分。</p>
  30. </body>
  31. </html>
运行一下

myVar 的值将是 dogs, tuts, 或者 cars。

Selectbox

使用 ng-model 指令将选择框绑定到应用程序。

ng-model 属性中定义的属性将具有 selectbox 中所选选项的值。

实例

根据所选选项的值显示一些文本:

  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 ng-app="">
  6. <form>
  7.   选择一个主题:
  8.   <select ng-model="myVar">
  9.     <option value="">
  10.     <option value="dogs">Dogs
  11.     <option value="tuts">Tutorials
  12.     <option value="cars">Cars
  13.   </select>
  14. </form>
  16. <div ng-switch="myVar">
  17.   <div ng-switch-when="dogs">
  18.      <h2>Dogs</h2>
  19.      <p>Welcome to a world of dogs.</p>
  20.   </div>
  21.   <div ng-switch-when="tuts">
  22.      <h2>Tutorials</h2>
  23.      <p>Learn from examples.</p>
  24.   </div>
  25.   <div ng-switch-when="cars">
  26.      <h2>Cars</h2>
  27.      <p>Read about cars.</p>
  28.   </div>
  29. </div>
  31. <p>ng-switch 指令根据下拉列表的值隐藏和显示 HTML 部分。</p>
  33. </body>
  34. </html>
运行一下

myVar 的值将是 dogs, tuts, 或者 cars。

程序代码

  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="formCtrl">
  7.   <form novalidate="">
  8.     姓氏:<br>
  9.     <input type="text" ng-model="user.firstName"><br>
  10.     名字:<br>
  11.     <input type="text" ng-model="user.lastName">
  12.     <br><br>
  13.     <button ng-click="reset()">重置</button>
  14.   </form>
  15.   <p>form = {{user}}</p>
  16.   <p>master = {{master}}</p>
  17. </div>
  19. <script>
  20. var app = angular.module('myApp', []);
  21. app.controller('formCtrl', function($scope) {
  22.     $scope.master = {firstName:"John", lastName:"Doe"};
  23.     $scope.reset = function() {
  24.         $scope.user = angular.copy($scope.master);
  25.     };
  26.     $scope.reset();
  27. });
  28. </script>
  30. </body>
  31. </html>
运行一下
novalidate 属性在 HTML5 中新增的。它会禁用任何默认浏览器验证。

实例解释

ng-app 指令定义了 AngularJS 应用程序。ng-controller 指令定义应用程序控制器。

ng-model 指令将两个输入元素绑定到模型中的 用户 对象。

formCtrl 控制器为 主 对象设置初始值，并定义 reset() 方法。

reset() 方法将用户对象设置为主对象。

ng-click 指令仅在单击按钮时才会调用 reset() 方法。

此应用程序不需要 novalidate 属性，但通常在 AngularJS 表单中使用它来覆盖标准 HTML5 验证。

AngularJS 事件
AngularJS 表单验证

分类导航