Scribd
Upload
7 views

Assignment 9

Uploaded by

snehaguptavv
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

Assignment 9

Uploaded by

snehaguptavv
Copyright
© © All Rights Reserved
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