极客教程如何使用AngularJS获取表单输入值
给定一个表单元素，任务是在AngularJS的帮助下获得用户输入的表单值。
步骤:
- 在用户在输入元素中输入数据后，我们借助Angular.copy(object)方法将其存储在JSON对象中。
- 之后，可以很容易地访问JSON对象中的数据。
例子1：在这个例子中，数据被存储在JSON对象中，并从中访问。
<!DOCTYPE HTML>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
</script>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function (scope) {
scope.userData = '';
scope.getData = function (user) {
scope.userData = angular.copy(user);
};
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
How to get form input value in AngularJS
</p>
<div ng-app="app">
<div ng-controller="controller">
<form action="javascript:void(0)">
firstName: <input type="text"
ng-model="user.fName" /><br>
lastName : <input type="text"
ng-model="user.lName" /><br>
<br>
<button ng-click="getData(user)">
SAVE
</button>
</form>
<p>FirstName = {{userData.fName}}</p>
<p>lastName = {{userData.lName}}</p>
</div>
</div>
</body>
</html>
输出:
例子2：在这个例子中，数据被存储在JSON对象中，JSON对象的数据被打印。
<!DOCTYPE HTML>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
</script>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function (scope) {
scope.userData = '';
scope.getData = function (user) {
scope.userData = angular.copy(user);
};
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p>
How to get form input
value in AngularJS
</p>
<div ng-app="app">
<div ng-controller="controller">
<form action="javascript:void(0)">
firstName: <input type="text"
ng-model="user.fName" />
<br>
lastName : <input type="text"
ng-model="user.lName" />
<br>
Ph.No.: <input type="text"
ng-model="user.Phone" />
<br>
City: <input type="text"
ng-model="user.city" />
<br>
<button ng-click="getData(user)">
SAVE
</button>
</form>
<p>User Data Json = {{userData | json}}</p>
</div>
</div>
</body>
</html>
输出:
