个性化阅读
专注于IT技术分析

angularjs表单

本文概述

AngularJS可以帮助你创建一个表单,该表单丰富了数据绑定和输入控件的验证。

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

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

  • 输入元素
  • 选择元素
  • 按钮元素
  • textarea元素

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

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

  • 点击
  • 双击
  • ng-mousedown
  • 鼠标向上
  • Mouseenter的
  • ng-mouseleave
  • ng-mousemove
  • 鼠标悬停
  • 按键
  • 键控
  • 按键
  • ng-change

数据绑定

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

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

请参阅以下示例:

<!DOCTYPE html>
<html lang="en">
<script src="http://ajax.googleapis.com/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="http://ajax.googleapis.com/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="http://ajax.googleapis.com/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="http://ajax.googleapis.com/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="http://ajax.googleapis.com/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 = "http://ajax.googleapis.com/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@srcmini02.com";
            }
            
            $scope.reset();
         });
      </script>
      
   </body>
</html>
赞(0)
未经允许不得转载:srcmini » angularjs表单

评论 抢沙发

评论前必须登录!