Angular-Applications/UserServices.html at master · ramaditya29/Angular-Applications · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en" ng-app="Services">
<head>
  <title>Angular JS services</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
   <script>
   var app = angular.module('Services', []);

   app.service('UserService', function() {

   		var uid = 1;
   		var contacts = [{
   			id: 0,
   			'name': 'Aditya V',
   			'phone': '408-872-2112',
   			'email': 'ramaditya29@gmail.com'
   		}];
   		this.list = function() {
   			return contacts;
   		};

   		this.save = function(contact) {
   			if(contact.id == null) {
   				contact.id = uid++;
   				contacts.push(contact);
   			}
   			else{
   				for(i in contacts){
   					if(contacts[i].id == contact.id)
   						contacts[i] = contact;
   				}
   			}
   		};

   		this.deleteContact = function(id) {
   			for(i in contacts){
   				if(contacts[i].id == id)
   					contacts.splice(i,1);
   			}
   		};

   		this.edit = function(id) {
   			for(i in contacts) {
   				if(contacts[i].id == id)
   					return contacts[i];
   			}
   		};
   });
   app.controller('DataCtrl', function($scope, UserService) {
   		$scope.contacts = UserService.list();

   		$scope.saveContact = function() {
   			UserService.save($scope.newcontact);
   			$scope.newcontact = {};
   		};

   		$scope.deleteContact = function(id) {
   			UserService.deleteContact(id);
   		};

   		$scope.editContact = function(id) {
   			$scope.newcontact = UserService.edit(id);
   		};
   });

   </script>
</head>
<body >

<div class="container" ng-controller='DataCtrl'>

  <div class="jumbotron">
 	 <form class="form-horizontal" method="POST" type="form">
 	 	<div class="form-group">
 	 	 	<label class="control-label">Name</label>
 	 	 	<input type="text" class="form-control " ng-model="newcontact.name" />
 	 	</div>
 	 	<div class="form-group">
 	 	 	<label class="control-label">Email</label>
 	 	 	<input type="email" class="form-control " ng-model="newcontact.email" />
 	 	</div>
 	 	<div class="form-group">
 	 	 	<label class="control-label">Phone</label>
 	 	 	<input type="text" class="form-control " ng-model="newcontact.phone" />
 	 	</div>
 	 	<input type="hidden" ng-model="newcontact.id" />
 	 	<input type="button" class="btn btn-primary" value="Submit" ng-click="saveContact()" />
 	 </form>
  </div>

  <table class="table table-bordered table-striped table-hover">
  	<thead>
  		<tr>
  			<th>Name</th>
  			<th>Email</th>
  			<th>Phone</th>
  			<th></th>
  		</tr>
  	</thead>
  	<tbody>
  		<tr ng-repeat="contact in contacts">
  			<td>{{contact.name}}</td>
  			<td>{{contact.email}}</td>
  			<td>{{contact.phone}}</td>
  			<td><a href="#" ng-click="editContact(contact.id)">edit </a>| <a href="#" ng-click="deleteContact(contact.id)"> delete</td>
  		</tr>
  	</tbody>
  </table>
</div>

</body>
</html>