Scribd
Upload
33 views

Angular Js 7 To 12

The document contains code for an AngularJS application that displays student details in a table. It defines filters to convert names and grades to uppercase and lowercase, and binds the current date to the view with different date formats. The application defines filters to convert names and grades to uppercase and lowercase. It displays student details from an array of objects in a table using these filters. It also displays the current date bound to the view in short, medium, long and custom formats.

Uploaded by

Laya Gowda
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
33 views

Angular Js 7 To 12

The document contains code for an AngularJS application that displays student details in a table. It defines filters to convert names and grades to uppercase and lowercase, and binds the current date to the view with different date formats. The application defines filters to convert names and grades to uppercase and lowercase. It displays student details from an array of objects in a table using these filters. It also displays the current date bound to the view in short, medium, long and custom formats.

Uploaded by

Laya Gowda
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 8

7.

<html>
<head>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
</head>
<body ng-app="crud" ng-controller="crudcontroller">
<form name="formdata" on-submit="submit()">

<label>username:</label><input type="text" ng-model="form.username"


required><br>
<label>phone no:</label><input type="phone" ng-
model="form.ph"required><br>
<label>mail id:</label><input type="email" ng-model="form.mail"
required><br>

<button ng-click="submit()" ng-disabled="formdata.


$inavlid">{{editMode?'EDIT':'SUBMIT'}}</button>
<button ng-click="show()">VIEW</button>

</form>
<table ng-show="showTable">
<tr>
<th>username</th>
<th>phone_no</th>
<th>mailid</th>

</tr>
<tr ng-repeat="y in user">
<td>{{y.username}}</td>
<td>{{y.ph}}</td>
<td>{{y.mail}}</td>
<td> <button ng-click="edit(y)">EDIT</button></td>
<td><button ng-click="delete(y)">DELETE</button></td>
</tr>
</table>
</body>
<script src="prg9.js"></script>
</html>

var app=angular.module('crud',[]);
app.controller('crudcontroller',function($scope){

$scope.user=[];
$scope.form={};

$scope.submit=function(){
$scope.user.push($scope.form);
$scope.form={};
console.log($scope.user);
if($scope.editMode=true){
$scope.editMode=false;
}
}
$scope.show=function(){
if($scope.user.length){
if($scope.showTable==true){
$scope.showTable=false;
}else{
$scope.showTable=true;
}
}
}

$scope.edit=function(y){
$scope.editMode=true;
$scope.form=y;
}

$scope.delete=function(y){
var index = $scope.user.indexOf(y);
$scope.user.splice(index, 1);
}
});

8)
<html>
<head>
<style>
body{
background-color:black;
}
.login{
background-color:grey;
width:500px;
height:600px;
margin:0 auto;
padding:10px;
border:1px solid greenyellow;
}
button{
background-color:greenyellow;
border-radius:10px;
size:10%;
}
input{
width:500px;
padding-top:10px;
padding-bottom:10px;
}
</style>
</head>
<script src="D:/angular-1.6.9/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>

<body ng-app="doto" ng-controller="dotocart">


<div class="login">
<label>USERNAME:</label><input type="text" ng-model="username"><br>
<label>PASSWORD:</label><input type="password" ng-model="password">
<button ng-click="login()">Login</button>
</div>

</body>

<script src="prg8.js"></script>

</html>

var app=angular.module("doto",[]);
app.controller("dotocart",function($scope){

$scope.login=function(){
if($scope.username.length>8 && $scope.username==='ANGULARJS' &&
$scope.password==='ANGULARJS'){
alert("LOGIN SUCCESSFUL");
}
else{
alert("ERROR")
}
}
});

9)

<!DOCTYPE html>
<html ng-app="employeeApp">

<head>
<title>Employee Search</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 20px;
}

input {
padding: 8px;
margin-bottom: 10px;
}

table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></
script>
<script src="app.js"></script>
</head>

<body ng-controller="EmployeeController">
<h2>Employee Search</h2>

<label for="name">Name:</label>
<input type="text" id="name" ng-model="search.name">

<label for="city">City:</label>
<input type="text" id="city" ng-model="search.city">

<label for="salary">Salary:</label>
<input type="text" id="salary" ng-model="search.salary">
<button ng-click="show()">EXACT MATCH</button>
<table>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Salary</th>
<th>EmailId</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter:search">
<td>{{ employee.name }}</td>
<td>{{ employee.city }}</td>
<td>{{employee.salary}}</td>
<td>{{ employee.email }}</td>
<td>{{ employee.phone }}</td>
</tr>
</tbody>
</table>

<script src="search.js"></script>
</body>

</html>

var app = angular.module('employeeApp', []);

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


$scope.employees = [
{ name: 'John Doe',
city:'Mysuru',salary:'30000',email:'[email protected]',phone:'9876543210'},
{ name: 'Jane Smith',
city:'Banglore',salary:'40000',email:'[email protected]',phone:'9876543333'},
{ name: 'Bob Johnson',
city:'Manglore',salary:'45000',email:'[email protected]',phone:'9876545555'},
{ name: 'Bob Johnson',
city:'Manglore',salary:'333000',email:'[email protected]',phone:'9876545555'},
{ name: 'Johnson',
city:'Manglore',salary:'30000',email:'[email protected]',phone:'9876545555'},
];
});

10)
<!DOCTYPE html>
<html lang="en" ng-app="itemApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AngularJS Item Collection</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></
script>
</head>
<body ng-controller="ItemController">

<h1>Item Collection</h1>

<form ng-submit="addItem()">
<label for="itemName">Item Name:</label>
<input type="text" id="itemName" ng-model="newItemName" required>
<button type="submit">Add Item</button>
</form>

<ul>
<li ng-repeat="item in items">
{{ item.name }}
<button ng-click="removeItem(item)">Remove</button>
</li>
</ul>

<p>Total Items: {{ totalItems }}</p>

<script src="count.js"></script>
</body>
</html>

var app = angular.module('itemApp', []);

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

$scope.items = [
{ name: 'apple' },
{ name: 'Red' },
{ name: 'Sweet' }
];
$scope.totalItems = $scope.items.length;

$scope.addItem = function() {
if ($scope.newItemName) {
$scope.items.push({ name: $scope.newItemName });
$scope.newItemName = '';
updateTotalItems();
}
};

$scope.removeItem = function(item) {
var index = $scope.items.indexOf(item);
if (index !== -1) {
$scope.items.splice(index, 1);
updateTotalItems();
}
};

function updateTotalItems() {
$scope.totalItems = $scope.items.length;
}
});

11)
<!DOCTYPE html>
<html ng-app="studentApp">

<head>
<title>Student Details Converter</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></
script>
<script src="pg11.js"></script>
</head>

<body ng-controller="StudentController">
<h2>Student Details</h2>
<table>
<tr>
<th>Lowercase Name</th>
<th>Uppercase Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.name | lowercaseFilter }}</td> <!-- Displaying name in
lowercase -->
<td>{{ student.name | uppercaseFilter }}</td> <!-- Displaying name in
uppercase -->
<td>{{ student.age }}</td>
<td>{{ student.grade | uppercaseFilter }}</td> <!-- Displaying grade in
uppercase -->
</tr>
</table>
</body>
</html>

angular.module('studentApp', [])
.controller('StudentController', ['$scope', function ($scope) {
$scope.students = [{
name: 'Pragathi',
age: 20,
grade: 'A'
},
{
name: 'Jane Smith',
age: 22,
grade: 'B'
},
{
name: 'Michael Johnson',
age: 21,
grade: 'C'
}
];
}])
.filter('uppercaseFilter', function () {
return function (input) {
if (input) {
return input.toUpperCase();
}
};
})
.filter('lowercaseFilter', function () {
return function (input) {
if (input) {
return input.toLowerCase();
}
};
});

12)
<!DOCTYPE html>
<html ng-app="dateApp">
<head>
<title>Date Display</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></
script>
<script src="pg12.js"></script>
</head>
<body ng-controller="DateController">
<h2>Current Date</h2>
<p>Short date: {{ currentDate | date:'shortDate' }}</p>
<p>Medium date: {{ currentDate | date:'mediumDate' }}</p>
<p>Long date: {{ currentDate | date:'longDate' }}</p>
<p>Custom date format: {{ currentDate | date:customDateFormat }}</p>
</body>
</html>

angular.module('dateApp', [])
.controller('DateController', ['$scope', function($scope) {
$scope.currentDate = new Date();
$scope.customDateFormat = 'dd/MM/yyyy HH:mm:ss';
}]);

You might also like