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

Popular posts from this blog

Calculate Factorial using While loop in JavaScript.

Calculator

Simple calculator