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

Post a Comment

Popular posts from this blog

Calculate Factorial using While loop in JavaScript.

-
 AIM:  Source Code: <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title> </head> <body>  <input type="button" onclick="multi_3n5()" value="click here">  <script>  function multi_3n5() {  var n = parseInt(prompt("Number : "));  var i=1,f=1;  while(i<=n){  f=f*i;  i++;  }  document.write("factorial of the number = "+f);}  </script> </body> </html>
Read more

Calculator

-
 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     Enter a Number 1:<input type="text" id="number1" ><br>     Enter a Number 2:<input type="text" id="number2" ><br>     Result:<input type="text" id="result" ><br>     <input type="button" value="+" onclick="calc('+')">     <input type="button" value="-" onclick="calc('-')">     <input type="button" value="/" onclick="calc('/')">     <input type="button" value="x" onclick="calc('x')"> </body> <script> function calc(operator){     ...
Read more

Registration form

-
 <!DOCTYPE html><html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Student Registration Form</title></head> <body><h2>Student Registration Form</h2> <form action="submit_form.html" method="post">     <label for="name">Full Name:</label>     <input type="text" id="name" name="name" required>     <label for="email">Email:</label>     <input type="email" id="email" name="email" required>     <label for="phone">Phone Number:</label>     <input type="tel" id="phone" name="phone" required>     <label for="dob">Date of Birth:</label>     <input type="date" id="dob...
Read more