angularjs表单 angularjs表单|AngularJS教程

本文概述

数据绑定
AngularJS复选框
AngularJS单选按钮
AngularJS选择框
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="http://www.srcmini.com/tuts">Tutorials < input type="radio" ng-model="myVar" value="http://www.srcmini.com/fest">Festivals < input type="radio" ng-model="myVar" value="http://www.srcmini.com/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指令用于将选择框绑定到你的应用程序。
【angularjs表单】请参阅以下示例：

< !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="http://www.srcmini.com/tuts">Tutorials < option value="http://www.srcmini.com/fest">Festivals < option value="http://www.srcmini.com/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@srcmini.com"; }$scope.reset(); }); < /script>< /body> < /html>