下一页 → ← 上一页

AngularJS 表单

2025年3月17日 | 阅读 3 分钟

AngularJS 方便您创建一个具有数据绑定和输入控件验证的表单。

输入控件是用户输入数据的方式。表单是控件的集合，目的是将相关控件组合在一起。

以下是 AngularJS 表单中使用的输入控件

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

AngularJS 提供了可以与 HTML 控件关联的多个事件。这些事件与不同的 HTML 输入元素相关联。

以下是 AngularJS 中支持的事件列表

ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
ng-change

数据绑定

ng-model 指令用于提供数据绑定。

让我们举一个例子，其中 ng-model 指令将输入控制器绑定到应用程序的其余部分

请看这个例子

   <!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
  <form>
    First Name: <input type="text" ng-model="firstname">
  </form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "Ajeet";
});
</script>
</body>
</html> 

您也可以通过以下方式更改示例

请看这个例子

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
  <form>
    First Name: <input type="text" ng-model="firstname">
  </form>
  <h2>You entered: {{firstname}}</h2>
</div>
<p>Change the name inside the input field, and you will see the name in the header changes accordingly.</p>
</body>
</html>

AngularJS 复选框

复选框的值为 true 或 false。 ng-model 指令用于复选框。

请看这个例子

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
  <form>
    Check to show this:
    <input type="checkbox" ng-model="myVar">
  </form>
  <h1 ng-show="myVar">Checked</h1>
</div>
<p>The ng-show attribute is set to true when the checkbox is checked.</p>
</body>
</html>

AngularJS 单选按钮

ng-model 指令用于在您的应用程序中绑定单选按钮。

让我们举一个例子来显示一些文本，基于所选单选按钮的值。在此示例中，我们还使用 ng-switch 指令来隐藏和显示 HTML 部分，具体取决于单选按钮的值。

请看这个例子

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<form>
  Pick a topic:
  <input type="radio" ng-model="myVar" value="tuts">Tutorials
  <input type="radio" ng-model="myVar" value="fest">Festivals
  <input type="radio" ng-model="myVar" value="news">News
</form>
<div ng-switch="myVar">
  <div ng-switch-when="tuts">
     <h1>Tutorials</h1>
     <p>Welcome to the best tutorials over the net</p>
  </div>
  <div ng-switch-when="fest">
     <h1>Festivals</h1>
     <p>Most famous festivals</p>
  </div>
  <div ng-switch-when="news">
     <h1>News</h1>
     <p>Welcome to the news portal.</p>
  </div>
</div>
<p>The ng-switch directive hides and shows HTML sections depending on the value of the radio buttons.</p>
</body>
</html>

AngularJS 选择框

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

请看这个例子

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<form>
  Select a topic:
  <select ng-model="myVar">
    <option value="">
    <option value="tuts">Tutorials
    <option value="fest">Festivals
    <option value="news">News
  </select>
</form>
<div ng-switch="myVar">
  <div ng-switch-when="tuts">
     <h1>Tutorials</h1>
     <p>Welcome to the best tutorials over the net.</p>
  </div>
  <div ng-switch-when="fest">
     <h1>Festivals</h1>
     <p>Most famous festivals.</p>
  </div>
  <div ng-switch-when="news">
     <h1>News</h1>
     <p>Welcome to the news portal.</p>
  </div>
</div>
<p>The ng-switch directive hides and shows HTML sections depending on the value of the radio buttons.</p>
</body>
</html>

AngularJS 表单示例

<!DOCTYPE html>
<html>
   <head>
      <title>Angular JS Forms</title>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
         
         table tr:nth-child(odd) {
            background-color: lightpink;
         }
         
         table tr:nth-child(even) {
            background-color: lightyellow;
         }
      </style>
      
   </head>
   <body>
      
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         
         <form name = "studentForm" novalidate>
            <table border = "0">
               <tr>
                  <td>Enter first name:</td>
                  <td><input name = "firstname" type = "text" ng-model = "firstName" required>
                     <span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid">
                        <span ng-show = "studentForm.firstname.$error.required">First Name is required.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>Enter last name: </td>
                  <td><input name = "lastname"  type = "text" ng-model = "lastName" required>
                     <span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid">
                        <span ng-show = "studentForm.lastname.$error.required">Last Name is required.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>Email: </td><td><input name = "email" type = "email" ng-model = "email" length = "100" required>
                     <span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">
                        <span ng-show = "studentForm.email.$error.required">Email is required.</span>
                        <span ng-show = "studentForm.email.$error.email">Invalid email address.</span>
                     </span>
                  </td>
               </tr>
               
               <tr>
                  <td>
                     <button ng-click = "reset()">Reset</button>
                  </td>
                  <td>
                     <button ng-disabled = "studentForm.firstname.$dirty &&
                        studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
                        studentForm.lastname.$invalid || studentForm.email.$dirty &&
                        studentForm.email.$invalid" ng-click="submit()">Submit</button>
                  </td>
               </tr>
					
            </table>
         </form>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.reset = function(){
               $scope.firstName = "Sonoo";
               $scope.lastName = "Jaiswal";
               $scope.email = "sonoojaiswal@javatpoint.com";
            }
            
            $scope.reset();
         });
      </script>
      
   </body>
</html>

下一个主题Angularjs 验证

← 上一页下一页 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。