Scribd
Upload
10 views7 pages

Assignment 9

Uploaded by

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

Assignment 9

Uploaded by

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

Assignment 9

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Assignment-9</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

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

</head>

<body>

<div ng-app = "myApp" class = "container" style="width:550px">

<div style="text-align:center;color:rgb(15, 15, 15);background-color: rgb(202, 226, 248);">

<h3><b>Registraion Form</b></h3>

</div>

<div ng-controller = "ContactController">

<div align="right">

<a href="#" ng-click="searchUser()">{{title}}</a>

</div>

<form role = "form" class="well" ng-hide="ifSearchUser">

<div class = "form-group">

<label for = "name"> Name: </label>

<input type = "text" id = "name" class = "form-control" placeholder = "Enter Name " ng-model =
"newcontact.name">

</div>

<div class = "form-group">

<label for = "email"> Email: </label>


<input type = "email" id = "email" class = "form-control" placeholder
= "Enter Email " ng-model = "newcontact.email">

</div>

<div class = "form-group">

<label for = "password"> Password: </label>

<input type = "password" id = "password" class = "form-control"


placeholder = "Enter Password " ng-model = "newcontact.password">

</div>

<div class = "form-group">

<label for = "phone"> Phone: </label>

<input type = "text" id = "phone" class = "form-control" placeholder


= "Enter Phone " ng-model = "newcontact.phone">

</div>

<div class = "form-group">

<label for = "age"> Age: </label>

<input type = "text" id = "age" class = "form-control" placeholder =


"Enter Age " ng-model = "newcontact.age">

</div>

<br>

<input type="hidden" ng-model="newcontact.id">

<input type="button" class="btn btn-primary" ng-click="saveContact()"


class="btn btn-primary" value = "Submit">

</form>

<div><h4><b>Registered Users</b></h4>

<table ng-if="contacts.length" class = "table table-striped table-bordered


table-hover">

<thead>

<tr class = "info">

<th>Name</th>

<th>Email</th>

<th>Phone</th>
<th>Age</th>

<th ng-if="!ifSearchUser">Action</th>

</tr>

</thead>

<tbody>

<tr ng-repeat = "contact in contacts">

<td>{{ contact.name }}</td>

<td>{{ contact.email }}</td>

<td>{{ contact.phone }}</td>

<td>{{ contact.age }}</td>

<td ng-if="!ifSearchUser">

<a href="#" ng-click="edit(contact.id)" role =


"button" class = "btn btn-info">edit</a> &nbsp;

<a href="#" ng-click="delete(contact.id)" role =


"button" class = "btn btn-danger">delete</a>

</td>

</tr>

</tbody>

</table>

<div ng-hide="contacts.length > 0">No Users Found</div>

</div>

</div>

</div>

</body>

</html>

Angular JS
ar myApp = angular.module("myApp", []); myApp.service("ContactService"

, function(){

var uid = 1;

var contacts = [{
'id' : 0,

'name' : 'Nikita Kalaskar',

'email' : '[email protected]',

'password': 'SumedhaZ',

'phone' : '123456789',

'age' : '19'}];

// Save Service for sving new contact and saving existing edited contact.

this.save = function(contact)

if(contact.id == null)

contact.id = uid++;

contacts.push(contact);

else

for(var i in contacts)

if(contacts[i].id == contact.id)

contacts[i] = contact;

};

// serach for a contact

this.get = function(id)
{

for(var i in contacts )

if( contacts[i].id == id)

return contacts[i];

};

//Delete a contact

this.delete = function(id)

for(var i in contacts)

if(contacts[i].id == id)

contacts.splice(i,1);

};

//Show all contacts

this.list = function()

return contacts;

};

});

////Controller area .....


myApp.controller("ContactController" , function($scope , ContactService){

console.clear();

$scope.ifSearchUser = false;

$scope.title ="List of Users";

$scope.contacts = ContactService.list();

$scope.saveContact = function()

console.log($scope.newcontact); if($scope.newcontact ==

null || $scope.newcontact == angular.undefined)

return;

ContactService.save($scope.newcontact);

$scope.newcontact = {};

};

$scope.delete = function(id)

ContactService.delete(id);

if($scope.newcontact != angular.undefined && $scope.newcontact.id == id)

$scope.newcontact = {};

};

$scope.edit = function(id)

$scope.newcontact = angular.copy(ContactService.get(id));

};

$scope.searchUser = function(){ if($scope.title == "List of

Users"){
$scope.ifSearchUser=true;

$scope.title = "Back";

else

$scope.ifSearchUser = false;

$scope.title = "List of Users";

};

});

Output

You might also like