<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 表单</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<h2>用户注册</h2>
<form ng-submit="submitForm()">
<label for="username">用户名:</label>
<input type="text" id="username" ng-model="user.username" required>
<br>
<label for="email">电子邮件:</label>
<input type="email" id="email" ng-model="user.email" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" ng-model="user.password" required>
<br>
<button type="submit">提交</button>
</form>
<p ng-show="submitted">表单已提交！</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.user = {};
$scope.submitted = false;
$scope.submitForm = function () {
// 在这里可以添加处理提交表单的逻辑
console.log('用户提交的数据:', $scope.user);
$scope.submitted = true;
};
});
</script>
</body>
</html>
在这个例子中，我们创建了一个简单的用户注册表单。表单使用了 ng-model 指令来绑定输入字段与 AngularJS 控制器中的数据模型。当用户点击提交按钮时，submitForm 函数会被调用，你可以在这个函数中添加处理表单数据的逻辑。
请注意，这只是一个简单的例子，实际应用中可能需要更复杂的表单验证和处理逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/4868/Angular