Scribd
Upload
45 views17 pages

AJS PRGM 5-10

The document describes an AngularJS program that: 1. Displays a list of students and their details including name and CGPA. 2. Allows the user to add new students by entering name and CGPA values. 3. Automatically updates the total student count displayed. The program uses AngularJS filters, controllers, models and ng-repeat directive to display the student list and manage adding/removing students from the list. On adding a new student, the values are pushed to the student model array and the count gets updated.

Uploaded by

dillumiya132
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
45 views17 pages

AJS PRGM 5-10

The document describes an AngularJS program that: 1. Displays a list of students and their details including name and CGPA. 2. Allows the user to add new students by entering name and CGPA values. 3. Automatically updates the total student count displayed. The program uses AngularJS filters, controllers, models and ng-repeat directive to display the student list and manage adding/removing students from the list. On adding a new student, the values are pushed to the student model array and the count gets updated.

Uploaded by

dillumiya132
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

AJS LAB MANUAL

5. Develop AngularJS application that displays a details of students and their CGPA.
Allow users to read the number of students and display the count. Note: Student
details may be included in the program.
Program:

<html ng-app="studentApp">
<head>
<title>AngularJS Student Details</title>
<script src="Ang.js"></script>
</head>
<body ng-controller="studentController">
<h2>Student Details</h2> Student Name:
<input type="text" ng-model="name" /> CGPA:
<input type="number" ng-model="cgpa" ng-min="1" ng-max="10"/>
<button ng-click="addStudent()">Add Student</button>
<p>Total Students: {{ students.length }}</p>
<ul>
<li ng-repeat="student in students">
{{ student.name }} - CGPA: {{ student.cgpa }}
</li>
</ul>
<script>
var app = angular.module('studentApp', []); app.controller('studentController', function
($scope) {
$scope.students = [];
$scope.addStudent = function () { if ($scope.name && $scope.cgpa) {
$scope.students.push({
name: $scope.name, cgpa:
$scope.cgpa
});
// Clear the input fields
$scope.name = '';
$scope.cgpa = '';

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

}
};
});
</script>
</body>
</html>
Output:

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

6. Develop an AngularJS program to create a simple to-do list application. Allow users to add,
edit, and delete tasks. Note: The default values for tasks may be included in the program

Program:
<html ng-app="todoApp">
<head>
<title>AngularJS Todo List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="todoController">
<h1>Todo List</h1>
<!-- Form for adding a new task -->
<form ng-submit="addTask()"> Task:
<input type="text" ng-model="newTask" required>
<button type="submit">Add Task</button>
</form>
<br>
<!-- Table to display task information -->
<table>
<thead>
<tr>
<th>Task</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks">
<td>{{ task }}</td>
<td>
<button ng-click="editTask($index)">Edit</button>
<button ng-click="deleteTask($index)">Delete</button>
</td>
</tr>

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

</tbody>
</table>
<!-- Edit Task Modal -->
<div ng-if="editingTaskIndex !== null">
<h2>Edit Task</h2> Task:
<input type="text" ng-model="tasks" required>
<br>
<button ng-click="saveEdit()">Save</button>
<button ng-click="cancelEdit()">Cancel</button>
</div>
<script>
var app = angular.module('todoApp', []);
app.controller('todoController', function ($scope) {
$scope.tasks = [ 'Task 1',
'Task 2',
'Task 3'
];
$scope.newTask = '';
$scope.editingTaskIndex = null;
$scope.addTask = function () {
$scope.tasks.push($scope.newTask);
$scope.newTask = '';
};
$scope.editTask = function (index) {
// Prompt for updated task with validation
var updatedTask = prompt('Enter updated task:');
// Check if the user pressed cancel if (updatedTask !== null) {
// Update the task
$scope.tasks.splice(index, 1, updatedTask);
}
};

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

$scope.deleteTask = function (index) {


$scope.tasks.splice(index, 1);
};
});
</script>
</body>
</html>

Output:

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

7. Write an AngularJS program to create a simple CRUD application (Create, Read,


Update, and Delete) for managing users.
Program:
<html ng-app="crudApp">
<head>
<title>AngularJS CRUD Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="crudController">
<h1>User Management</h1>
<!-- Form for adding a new user -->
<form ng-submit="addUser()"> Name:
<input type="text" ng-model="name" required>
<br> Age:
<input type="number" ng-model="age" required>
<br>
<button type="submit">Add User</button>
</form>
<br>
<!-- Table to display user information -->
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

<td>
<button ng-click="editUser(user)">Edit</button>
<button ng-click="deleteUser(user)">Delete</button>
</td>
</tr>
</tbody>
</table>
<script>
var app = angular.module('crudApp', []);
app.controller('crudController', function ($scope) {
$scope.users = [
{ name: 'Ram', age: 25 },
{ name: 'Sam', age: 30 },
];
$scope.addUser = function () {
$scope.users.push({ name: $scope.name, age: $scope.age });
$scope.name = '';
$scope.age = '';
};
$scope.editUser = function (user) {
var index = $scope.users.indexOf(user);
// Prompt for updated values with validation
var updatedName = prompt('Enter updated name:', user.name); var updatedAge =
prompt('Enter updated age:', user.age);
// Check if the user pressed cancel
if (!(updatedName == null && updatedAge == null) ){
// Update the user
var updatedUser = { name: updatedName, age: parseInt(updatedAge)
};
$scope.users.splice(index, 1, updatedUser);
}
};

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

$scope.deleteUser = function (user) {


var index = $scope.users.indexOf(user);
$scope.users.splice(index, 1);
};
});
</script>
</body>
</html>

Output:

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

8. Develop AngularJS program to create a login form, with validation for the
username and password fields.
Program:
<html ng-app="loginApp">
<script src="Ang.js"></script>
<body ng-controller="loginController">
<h1>Login Form</h1>
<!-- Form for login with validation -->
<form ng-submit="login()"> Username
<input type="text" ng-model="username" required>
<br> Password
<input type="password" ng-model="password" required>
<br>
<button type="submit">Login</button>
</form>
<script>
var app = angular.module('loginApp', []); app.controller('loginController', function
($scope) {
$scope.login = function () {
// Check if username is "Ram" and password is "Ram"
if ($scope.username == 'ram' && $scope.password == 'ram') { alert('Login successful');
// Add further logic for successful login
} else {
alert('Login failed. Invalid username or password.');
// Add logic for failed login
}
};
});
</script>
</body>
</html>

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

Output:

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

9. Create an AngularJS application that displays a list of employees and their


salaries. Allow users to search for employees by name and salary. Note: Employee
details may be included in the program.
Program:
<html ng-app="employeeApp">
<head>
<title>AngularJS Employee Search</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="employeeController">
<h2>Employee List</h2> Search by Name:
<input type="text" ng-model="searchName" />
Search by Salary:
<input type="number" ng-model="searchSalary" />
<ul>
<li ng-repeat="employee in employees | filter: {name: searchName, salary:
searchSalary}">
{{ employee.name }} - Salary: Rs{{ employee.salary }}
</li>
</ul>
<script>
var app = angular.module('employeeApp', []); app.controller('employeeController',
function ($scope) {
$scope.employees = [
{ name: 'Ram', salary: 50000 },
{ name: 'abi', salary: 60000 },
{ name: 'sam', salary: 75000 },
{ name: 'raj', salary: 55000 }
];
$scope.searchName = '';
$scope.searchSalary = '';
});
</script>

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

</body>
</html>

Output:

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

10. 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. Note: The default values
for items may be included in the program.
Program:
<html ng-app="itemApp">
<script src="Ang.js"></script>
<body ng-controller="itemController">
<h2>Item Collection</h2>
Add New Item:
<input type="text" ng-model="newItem" />
<button ng-click="addItem()">Add Item</button>
<ul>
</ul>
<li ng-repeat="item in items track by $index">
{{ item }}
<button ng-click="removeItem($index)">Remove</button>
</li>
<p>Total Items: {{ items.length }}</p>
<script>
var app = angular.module('itemApp', []);
app.controller('itemController', function ($scope) {
$scope.items = ['Item 1', 'Item 2', 'Item 3']; // Default items
$scope.newItem = '';
$scope.addItem = function () { if ($scope.newItem) {
$scope.items.push($scope.newItem);
$scope.newItem = ''; // Clear the input field
}
};
$scope.removeItem = function (index) {
$scope.items.splice(index, 1);
};

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

});
</script>
</body>
</html>

Output:

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

11. Create AngularJS application to convert student details to Uppercase using


angular filters. Note: The default details of students may be included in the
program.
Program:
<html ng-app="studentApp">
<title>Student Name Converter</title>
<script src="Ang.js"></script>

<body ng-controller="studentController">

<h2>Student Names</h2>

<!-- Display the original student names -->


<h3>Original Names:</h3>
<ul>
<li ng-repeat="name in names">
{{ name }}
</li>
</ul>

<!-- Display the student names in uppercase using filters -->


<h3>Names in Uppercase:</h3>
<ul>
<li ng-repeat="name in names">
{{ name | uppercase }}
</li>
</ul>

<script>
var app = angular.module('studentApp', []);

app.controller('studentController', function ($scope) {


$scope.names = ['Raj', 'Ram', 'Sam'];

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

});
</script>
</body>
</html>

Output:

Dept Of ISE T John Institute of Technology 21CSL581


AJS LAB MANUAL

12. Create an AngularJS application that displays the date by using date filter
parameters

Program:

<html ng-app="dateApp">
<head>
<title>Date Display Application</title>
<script src="Ang.js"></script>
</head>
<body ng-controller="dateController">
<h2>Date Display</h2>
<!-- Display the current date with various filter parameters -->
<p>Default Format: {{ currentDate | date }}</p>
<p>Custom Format (yyyy-MM-dd): {{ currentDate | date:'yyyy-MM-dd' }}</p>
<p>Short Date: {{ currentDate | date:'shortDate' }}</p>
<p>Full Date: {{ currentDate | date:'fullDate' }}</p>
<script>
var app = angular.module('dateApp', []); app.controller('dateController', function ($scope) {
$scope.currentDate = new Date();
});
</script>
</body>
</html>
Output:

Dept Of ISE T John Institute of Technology 21CSL581

You might also like