srcmini本文概述
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>
评论前必须登录！
注册