Create a simple AngularJS application that display a student details (Name, Age, Batch).
Allow the user to add details using an input form.
Source Code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
let myApp=angular.module("app",[]);
myApp.controller("controller",function($scope){
$scope.userData={};
$scope.getData=function(user){
$scope.userData=angular.copy(user);
}
})
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="controller">
<form action="javascript:void(0)">
Name:<input type="text" ng-model="user.name"><br><br>
Age:<input type="text" ng-model="user.age"><br><br>
Batch:<input type="text" ng-model="user.batch"><br><br>
<button ng-click="getData(user)">SAVE</button>
</form>
<p ng-if="userData.name || userData.age"> User Data={{userData|json}}</p>
</div>
</div>
</body>
</html>
Comments