LabManual AJS

VKIT – 21CSL581
VIVEKANANDA INSTITUTE OF TECHNOLOGY

(Affiliated to Visvesvaraya Technological University- Belagavi)
Gudimavu, Kengeri Hobli, Kumbalgodu Post, Kumbalgodu, Bengaluru, Karnataka 560074
DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND

MACHINE LEARNING
V SEMESTER
ANGULAR JS LABORATORY MANUAL

21CSL581
Course Objectives:
The student should be made to:
CLO 1. To learn the basics of Angular JS.
CLO 2. To understand the Angular JS Modules.
CLO 3. To implement Forms, inputs and Services
CLO 4. To implement Directives and Databases
CLO 5. To understand basics of Node JS.
Dept. of AI&ML 2023-2024

VKIT – 21CSL581
CONTENTS
1. Develop Angular JS program that allows user to input their first name and last name and display their
full name.
2. Develop an Angular JS application that displays a list of shopping items. Allow users to add and remove
items from the list using directives and controllers.
3. Develop a simple Angular JS calculator application that can perform basic mathematical operations
(addition, subtraction, multiplication, division) based on user input.
4. Write an Angular JS application that can calculate factorial and compute square based on given user
input.
5. Develop AngularJS application that displays the details of students and their CGPA. Allow users to
read the number of students and display the count.
6. Develop an AngularJS program to create a simple to-do list application. Allow users to add, edit, and
delete tasks.
7. Develop AngularJS program to create a login form, with validation for the username and password
fields.
8. Create an AngularJS application that displays a list of employees and their salaries. Allow users to
search for employees by name and salary.
9. Create AngularJS application that allows users to maintain a collection of items. The application should
display the current total number of items, and this count should automatically update as items are added
or removed. Users should be able to add items to the collection and remove them as needed.
10. Create AngularJS application to convert student details to Uppercase using angular filters.
11. Create an AngularJS application that displays the date by using date filter parameters
12. Write an AngularJS program to create a simple CRUD application (Create, Read, Update, and Delete)
for managing users.

VKIT – 21CSL581
Prog 1: Develop Angular JS program that allows user to input their first name and last
name and display their full name.
Angular JS Full Name Program

<html>
<head>
<title> Angular </title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<script>
var app=angular.module("myApp",[ ]);
app.controller("myCntrl",function($scope){
$scope.firstName="Sachin"
$scope.lastName="Tendulkar"
});
</script>
</head>
<body ng-app="myApp">
<h2>Angular JS Application to Display Full Name</h2>
<div ng-controller="myCntrl">
Enter First Name: <input type="text" ng-model="firstName"><br/><br>
Enter Last Name: <input type="text" ng-model="lastName"><br/><br>
Your Full Name: {{firstName +" "+ lastName}}
</div>
</body>
</html>

VKIT – 21CSL581
Output:

VKIT – 21CSL581
Prog 2: Develop an Angular JS application that displays a list of shopping items.

Allow users to add and remove items from the list using directives and
controllers.
<!DOCTYPE html>
<html>
<title>
Shopping Items Application
</title>
<head>
</script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCntrl",function($scope){
$scope.shoppingItems=['Apple','Mango','Banana','Grapes']
$scope.addItem=function(){
if($scope.newItem && $scope.shoppingItems.indexOf($scope.newItem)==-1)
{
$scope.shoppingItems.push($scope.newItem)
$scope.newItem=""
}
else
{
if($scope.newItem)
alert("This item is already there in the shopping list")
else

VKIT – 21CSL581
alert("Please enter an item to add")

}
}
$scope.removeItem=function(){
//console.log("function called")
if($scope.shoppingItems.indexOf($scope.selectItem)==-1)
{
alert("Please select an item to remove")
}
else{
var index=$scope.shoppingItems.indexOf($scope.selectItem)
$scope.shoppingItems.splice(index,1)
$scope.selectItem=""
}
}
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCntrl">
<h2>Shopping Application</h2>
<h4>List of Shopping Items</h4>
<table border="1">
<tr>
<th>Sl. No.</th>
<th>Item</th>
</tr>

VKIT – 21CSL581
<tr ng-repeat="items in shoppingItems">

<td>{{$index+1}}</td>
<td>{{items}}</td>
</tr>
</table>
<br/>
<div>
Enter an Item to Add: <input type="text" ng-model="newItem">
<br>
<button ng-click="addItem()">Add Item</button>
</div><br><br>
<div>
Select an Item to Remove:
<select ng-model="selectItem" ng-options="item for item in
shoppingItems"></select>
<br>
<button ng-click="removeItem()">Remove Item</button>
</div>
</div>
</body>
</html>

VKIT – 21CSL581
Output:

VKIT – 21CSL581
Prog 3: Develop a simple Angular JS calculator application that can perform basic
mathematical operations (addition, subtraction, multiplication, division) based on user
input.
<!DOCTYPE html>
<html>
<title>
AJS Calculator
</title>
<head>
</script>
<script>
var app=angular.module("calcApp",[]);
app.controller("calcCntrl",function($scope)
{
$scope.num1=0
$scope.num2=0
$scope.result=0
$scope.operator="+"
$scope.compute=function(){
switch($scope.operator){
case '+': $scope.result=$scope.num1 + $scope.num2
break
case '-': $scope.result=$scope.num1 - $scope.num2
break
case '*': $scope.result=$scope.num1 * $scope.num2

VKIT – 21CSL581
break
case '/': if($scope.num2==0){
alert("Divide by zero error")
}
else{
$scope.result=$scope.num1/$scope.num2
}}}
});
</script>
</head>
<body ng-app="calcApp">
<h1>Angular JS Simple Calculator</h1>
<div ng-controller="calcCntrl">
Enter First Number: <input type="number" ng-model="num1"> <br><br>
Select Operator:<select ng-model="operator">
<option value="+"> Addition </option>
<option value="-"> Subtraction </option>
<option value="*"> Multiply </option>
<option value="/"> Divide </option>
</select> <br>
<br>
Enter Second Number:<input type="number" ng-model="num2">
<br><br>
<button ng-click="compute()">Calculate</button>
<br/><br>
<br>

VKIT – 21CSL581
<b>{{num1 + " "+operator+ " "+ num2+ " = "+result}}</b>

</div>
</body>
</html>
Output:

VKIT – 21CSL581
Prog 4: Write an Angular JS application that can calculate factorial and

compute square based on given user input.
<!DOCTYPE html>
<html>
<title>
AJS Square and Factorial Application
</title>
<head>
</script>
<script>
var app=angular.module("mySqFct", []);
app.controller("mySqFctCntrl", function($scope){
$scope.num=0
$scope.result
$scope.factorial=function()
{
if($scope.num==0)
{
$scope.result=1
}
else{
$scope.fact=1
for(var i=$scope.num; i>=1; i--)
{
$scope.fact=$scope.fact*i
}

VKIT – 21CSL581
$scope.result=$scope.fact
}
}
$scope.square=function(){
$scope.result=$scope.num*$scope.num
}
});
</script>
</head>
<body ng-app="mySqFct">
<h1> Angular JS Factorial and Square Application</h1>
<div ng-controller="mySqFctCntrl">
Enter the Number: <input type="number" ng-model="num"><br> <br>
<button ng-click="factorial()">Compute Factorial</button>
<button ng-click="square()">Compute Square</button>
<br/>
<b>{{result}}</b>
</div>
</body>
</html>

VKIT – 21CSL581
Output:

VKIT – 21CSL581
Prog 5: Develop AngularJS application that displays the details of students and
their CGPA. Allow users to read the number of students and display the count.
<!DOCTYPE html>
<html>
<title>Student Details Application</title>
<head>
</script>
<script>
var app=angular.module("studDetailsApp",[]);
app.controller("studDetailsAppCntrl",function($scope){
$scope.studData=[]
$scope.generateData=function()
{
$scope.studData=[]
for(var i=1;i<=$scope.num;i++)
{
var stud={
"SLNO":i,
"NAME":'Student-'+i,
"CGPA":(Math.random()*10+1).toFixed(2)
}
$scope.studData.push(stud)
}

VKIT – 21CSL581
}
});
</script>
</head>
<body ng-app="studDetailsApp">
<h1>Student Details Application</h1>
<div ng-controller="studDetailsAppCntrl">
Enter the Number of Students to Generate the Data:
<input type="number" ng-model="num">
<button ng-click="generateData()">Generate</button>
<br/>
<table border="1" ng-show="studData.length>0">
<tr>
<th>SLNO</th>
<th>NAME</th>
<th>CGPA</th>
</tr>
<tr ng-repeat="student in studData">
<td>{{student.SLNO}}</td>
<td>{{student.NAME}}</td>
<td>{{student.CGPA}}</td>
</tr>
</table>
<br/>
Number of Students={{studData.length}}
</div>

VKIT – 21CSL581
</body>
</html>
Output:

VKIT – 21CSL581
Prog 6: Develop an AngularJS program to create a simple to-do list application.
Allow users to add, edit, and delete tasks.
<!DOCTYPE html>
<html>
<title>TO DO Application</title>
<head>
</script>
<script>
var app=angular.module("toDoApp",[]);
app.controller("toDoAppCntrl",function($scope){
$scope.tasks=[
{'TITLE':'Task-1','COMPLETED':true,'EDITING':false},
{'TITLE':'Task-2','COMPLETED':false,'EDITING':false},
{'TITLE':'Task-3','COMPLETED':false,'EDITING':false}
]
$scope.addTask=function(){
if($scope.newTask)
{
var t={
'TITLE':$scope.newTask,
'COMPLETED':false,
'EDITING':false
}

VKIT – 21CSL581
$scope.tasks.push(t)
}
else{
alert("Please enter the task to add")
}
}
$scope.editTask=function(task)
{
task.EDITING=true
}
$scope.turnOffEditing=function(task){
task.EDITING=false
}
$scope.deleteTask=function(task)
{
var index=$scope.tasks.indexOf(task)
$scope.tasks.splice(index,1)
}
});
</script>
</head>
<body ng-app="toDoApp">
<h1>TO DO APPLICATION</h1>
<div ng-controller="toDoAppCntrl">
Enter the name of the Task:
<input type="text" ng-model="newTask">

VKIT – 21CSL581
<button ng-click="addTask()">Add Task</button>

<br/>
<br/>
<table border="1">
<tr>
<th>SLNO</th>
<th>Status</th>
<th>Task</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr ng-repeat="task in tasks">
<td>
<input type="checkbox" ng-model="task.COMPLETED">
</td>
<td>
<span ng-show="!task.EDITING">{{task.TITLE}}</span>
<input type="text" ng-show="task.EDITING"
ng-model="task.TITLE" ng- blur="turnOffEditing(task)">
</td>
<td>
<button ng-click="editTask(task)">Edit</button>
</td>
<td>
<button ng-click="deleteTask(task)">Delete</button>

VKIT – 21CSL581
</td>
</tr>
</table>
</div>
</body>
</html>
Output:

VKIT – 21CSL581
Prog 7: Develop AngularJS program to create a login form, with validation for
the username and password fields.
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Form Validation</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty &&
myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||

VKIT – 21CSL581
myForm.email.$dirty && myForm.email.$invalid" style="color:green">

</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'VKIT';
$scope.email = 'vkit.vtu@gmail.com';
});
</script>
</body>
</html>
Output:

VKIT – 21CSL581
Prog 8: Create an AngularJS application that displays a list of employees and their
salaries. Allow users to search for employees by name and salary.
<!DOCTYPE html>
<html>
<title>Angular JS Filter Employee Search Application</title>
<head>
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.mi
n.js">
</script>
<script>
var app=angular.module("empSearchApp",[]);
app.controller("empSearchAppCntrl",function($scope){
$scope.empList=[
{'name':'Krishna','salary':500000},
{'name':'Rajeev','salary':400000},
{'name':'Mukund','salary':300000},
{'name':'Gopal','salary':400000},
{'name':'Murali','salary':500000},
{'name':'Manohar','salary':600000}
]
$scope.clearFilters=function()
{
$scope.searchName=''
$scope.searchSalary=''

VKIT – 21CSL581
}
});
</script>
</head>
<body ng-app="empSearchApp">
<h1>Employee Search Application</h1>
<div ng-controller="empSearchAppCntrl">
Search by Employee Name:<input type="text" ng-model="searchName"> <br> <br>
Search by Employee salary:<input type="number" ng-model="searchSalary">
<br><br>
<button ng-click="clearFilters()">Clear Filters</button>
<br/>
<h3>List of Employees</h3>
<table border="1">
<tr>
<th>SLNO</th>
<th>EMP NAME</th>
<th>SALARY</th>
</tr>
<tr ng-repeat="emp in empList |
filter:{name:searchName,salary:searchSalary}">
<td>{{emp.name}}</td>
<td>{{emp.salary}}</td>
</tr>
</table>
</div>

VKIT – 21CSL581
</body>
</html>
Output:

VKIT – 21CSL581
Prog 9: Create AngularJS application that allows users to maintain a collection of
items. The application should display the current total number of items, and this
count should automatically update as items are added or removed. Users should
be able to add items to the collection and remove them as needed.
<!DOCTYPE html>
<html>
<title>Item Management Application</title>
<head>
</script>
<script>
var app=angular.module("itemMgmtApp",[]);
app.controller("itemMgmtAppCntrl",function($scope){
$scope.itemList=['Laptop','Projector','Smart Board','Markers']
$scope.addItem=function()
if($scope.newItem)
if($scope.itemList.indexOf($scope.newItem)==-1)

VKIT – 21CSL581
$scope.itemList.push($scope.newItem)
else{
alert('This item is already there in the item collection')
else{
alert('Please Enter the item to add')
$scope.removeItem=function(item)
var yes=confirm("Are you sure you want to delete "+item)
if(yes==true)
var index=$scope.itemList.indexOf(item)
$scope.itemList.splice(index,1)
});
</script>
</head>

VKIT – 21CSL581
<body ng-app="itemMgmtApp">
<h1>Item Management Application</h1>
<div ng-controller="itemMgmtAppCntrl">
Enter an item to add: <input type="text" ng-model="newItem">
<br><br>
<button ng-click="addItem()">ADD</button>
<br/><br/>
<b>List of Items</b>
<table border="1">
<tr>
<th>SLNO </th>
<th width="60%">Items </th>
<th>Remove </th>
</tr>
<tr ng-repeat="item in itemList">
<td>{{item}}</td>
<td><button ng-click=removeItem(item)>Remove</button></td>
</tr>
</table>
<br/>

VKIT – 21CSL581
<p style="color:red">Total Number of Items = <b style="font-

size:30px">{{itemList.length}}</b></p>
</div>
</body>
</html>
Output:

VKIT – 21CSL581
Prog 10: Create AngularJS application to convert student details to Uppercase
using angular filters.
<!DOCTYPE html>
<html>
<title>Student Details in Uppercase</title>
<head>
</script>
<script>
var app=angular.module("studDetailsUpperApp",[]);
app.controller("studDetailsUpperAppCntrl",function($scope){
$scope.studDetails=['hema','suma','reema','seema','anupama']
$scope.upper=true
$scope.lower=false
$scope.Lower=function()
{
$scope.upper=false
$scope.lower=true
}
$scope.Upper=function()
{
$scope.upper=true
$scope.lower=false
}

VKIT – 21CSL581
});
</script>
</head>
<body ng-app="studDetailsUpperApp">
<h1>Student Details in Uppercase</h1>
<div ng-controller="studDetailsUpperAppCntrl">
<button ng-click="Upper()">Upper</button>
<button ng-click="Lower()">Lower</button>
<br><br>
<table border="1">
<tr>
<th>SLNO</th>
<th>NAME</th>
</tr>
<tr ng-repeat="student in studDetails">
<td ng-show="upper">{{student|uppercase}}</td>
<td ng-show="lower">{{student|lowercase}}</td>
</tr>
</table>
</div>
</body>
</html>

VKIT – 21CSL581
Output:

VKIT – 21CSL581
Prog 11: Create an AngularJS application that displays the date by using date
filter parameters.
<!DOCTYPE html>
<html>
<title>Date Application</title>
<head>
</script>
<script>
var app=angular.module("dateApp",[]);
app.controller("dateAppCntrl",function($scope){
$scope.currentDate=new Date();
});
</script>
</head>
<body ng-app="dateApp">
<h1>Date in Different Formats</h1>
<div ng-controller="dateAppCntrl">
<h4>Current Date and Time: </h4> {{currentDate}}<br/><br>
<h4>Short Date: </h4> {{currentDate | date: 'short'}}<br/><br>
<h4>Long Date: </h4> {{currentDate | date: 'fullDate'}}<br/><br>
<h4>Medium Date: </h4>{{currentDate | date: 'medium'}}
</div>
</body>
</html>

VKIT – 21CSL581
Output:

VKIT – 21CSL581
Prog 12: Write an AngularJS program to create a simple CRUD application
(Create, Read, Update, and Delete) for managing users.
<!DOCTYPE html>
<html>
<title>USER MANAGEMENT APPLICATION</title>
<head>
</script>
<script>
var app=angular.module("userMgmtApp",[]);
app.controller("userMgmtAppCntrl",function($scope){
$scope.users=[
{'name':"Virat Kohli",
'email':'king.rcb18@gmail.com','editing':false},
{'name':'ABC','email':'abc@gmail.com','editing':false},
{'name':'XYZ','email':'xyz@gmail.com','editing':false}
]
$scope.createUser=function()
{
if($scope.newUserName && $scope.newUserEmail)
{
var u={
'name':$scope.newUserName,
'email':$scope.newUserEmail,

VKIT – 21CSL581
'editing':false
}
$scope.users.push(u)
$scope.newUserName=''
$scope.newUserEmail=''
}
else{
alert("Please provide the user name and email id")
}
}
$scope.readUser=function(user)
{
user.editing=true
}
$scope.updateUser=function(user){
user.editing=false
}
$scope.deleteUser=function(user)
{
var yes=confirm("Are you sure you want to delete")
if(yes==true)
{
var index=$scope.users.indexOf(user)
$scope.users.splice(index,1)
}
}

VKIT – 21CSL581
});
</script>
</head>
<body ng-app="userMgmtApp">
<h1>USER MANAGEMENT APPLICATION</h1>
<div ng-controller="userMgmtAppCntrl">
Enter the User Name:<input type="text" ng-model="newUserName"> </br><br>
Enter the User Email:<input type="text" ng-model="newUserEmail"><br><br>
      <button ng-
click="createUser()">Create</button>
<br/>
<br/>
<table border="1">
<tr>
<th>SLNO</th>
<th>NAME</th>
<th>EMAIL</th>
<th>READ</th>
<th>UPDATE</th>
<th>DELETE</th>
</tr>
<tr ng-repeat="user in users">
<td>
<span
ng-how="!user.editing">{{user.name}}</span>   &nbsp
<input type="text" ng-show="user.editing" ng-model="user.name">

VKIT – 21CSL581
</td>
<td>
<span ng-show="!user.editing">{{user.email}}</span>
<input type="text" ng-show="user.editing" ng-model="user.email">
</td>
<td>
<button ng-click="readUser(user)">Read</button>
</td>
<td>
<button ng-click="updateUser(user)">Update</button>
</td>
<td>
<button ng-click="deleteUser(user)">Delete</button>
</td>
</tr>
</table>
</div>
</body>
</html>

VKIT – 21CSL581
Output:

VKIT – 21CSL581
S1: HTML code to display the list when a button is clicked, and hide when the button is
clicked again (toggle switch):
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc()">Click Here!</button>
<div ng-show="showMe">
<h1 style="color:blue">SUBJECTS:</h1>
<div> 1. Artificial Intelligence & Machine Learning</div>
<div> 2. Automata Theory and Compiler Design</div>
<div> 3. Database Management Systems</div>
<div> 4. Research Methodology</div>
<div> 5. Computer Networks</div>
</div>
</div>
<script>
app.controller('myCtrl', function($scope) {
$scope.showMe = false;
$scope.myFunc = function() {
$scope.showMe = !$scope.showMe;
}
});
</script>
<p style="color:pink">Click the button to show/hide the list.</p>
</body>
</html>

VKIT – 21CSL581
S2: HTML code to increase the count variable when the mouse moves over the H1 element.
<!DOCTYPE html>
<html>
<body>
<h1 ng-mousemove="count=count + 1" style="color:purple">Mouse Over Me!</h1>
<h2>{{ count }}</h2>
</div>
<script>
$scope.count = 0;
});
</script>
</body>
</html>

VKIT – 21CSL581
S2: HTML code using ng-options.
<!DOCTYPE html>
<html>
<body>
<p>Select a car:</p>
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h2 style="color:green">You selected:</h2><h1 style="color:Maroon">
{{selectedCar.model}}</h1>
<h2 style="color:green">Its color is:</h2> <h1 style="color:blue">{{selectedCar.color}}</h1>
</div>
<script>
$scope.cars = [
{model : "Ford Mustang", color : "Red"},
{model : "Fiat 500", color : "White"},
{model : "Volvo XC90", color : "Black"}
];
});
</script>
</body>
</html>

LabManual AJS

Uploaded by

Copyright:

Available Formats

LabManual AJS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

LabManual AJS

Uploaded by

Copyright:

Available Formats

VKIT – 21CSL581

VIVEKANANDA INSTITUTE OF TECHNOLOGY

DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND

ANGULAR JS LABORATORY MANUAL

Dept. of AI&ML 2023-2024

items from the list using directives and controllers.

(addition, subtraction, multiplication, division) based on user input.

read the number of students and display the count.

search for employees by name and salary.

for managing users.

Dept. of AI&ML 2023-2024

Angular JS Full Name Program

Dept. of AI&ML 2023-2024

Dept. of AI&ML 2023-2024

Prog 2: Develop an Angular JS application that displays a list of shopping items.

Dept. of AI&ML 2023-2024

alert("Please enter an item to add")

Dept. of AI&ML 2023-2024

<tr ng-repeat="items in shoppingItems">

Dept. of AI&ML 2023-2024

Dept. of AI&ML 2023-2024

Dept. of AI&ML 2023-2024

Dept. of AI&ML 2023-2024

<b>{{num1 + " "+operator+ " "+ num2+ " = "+result}}</b>

Dept. of AI&ML 2023-2024

Prog 4: Write an Angular JS application that can calculate factorial and

Dept. of AI&ML 2023-2024

Dept. of AI&ML 2023-2024

Dept. of AI&ML 2023-2024

Dept. of AI&ML 2023-2024

Dept. of AI&ML 2023-2024

Dept. of AI&ML 2023-2024

Prog 6: Develop an AngularJS program to create a simple to-do list application.

Allow users to add, edit, and delete tasks.

Dept. of AI&ML 2023-2024

Dept. of AI&ML 2023-2024

<button ng-click="addTask()">Add Task</button>

Dept. of AI&ML 2023-2024

Dept. of AI&ML 2023-2024

the username and password fields.

Dept. of AI&ML 2023-2024

myForm.email.$dirty && myForm.email.$invalid" style="color:green">

Dept. of AI&ML 2023-2024

salaries. Allow users to search for employees by name and salary.

Dept. of AI&ML 2023-2024

Dept. of AI&ML 2023-2024

Dept. of AI&ML 2023-2024

Prog 9: Create AngularJS application that allows users to maintain a collection of

be able to add items to the collection and remove them as needed.

<title>Item Management Application</title>

Dept. of AI&ML 2023-2024

alert('This item is already there in the item collection')

alert('Please Enter the item to add')

var yes=confirm("Are you sure you want to delete "+item)

Dept. of AI&ML 2023-2024

<h1>Item Management Application</h1>

Enter an item to add: <input type="text" ng-model="newItem">

<th width="60%">Items </th>

<tr ng-repeat="item in itemList">