angularjshacks/index.html at master · punitjajodia/angularjshacks · 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
<!DOCTYPE html>
<html ng-app='users'>

	<head>
		<title></title>
		<style>

			body{
				font-family: sans-serif;
				width: 960px;
				margin: 0 auto;
			}

			th{
				border-bottom: 1px solid black;
				margin:0;
				padding:10px;
			}
			td{
				border-bottom: 1px solid lightgrey;
				margin: 0;
				padding: 10px;
			}

			.form-group input{
				width: 200px;
				height: 20px;
				margin-bottom: 10px;
				padding-left: 10px;
			}
			input.ng-dirty.ng-invalid {
				background-color: peachpuff;
			}

			input.ng-dirty.ng-valid {
				background-color: aquamarine;
			}
		</style>


	</head>

	<body ng-controller="usersController">
	<h1>
		Angular JS simple form
	</h1>

	<form name="userform" novalidate>
		<input type="hidden" ng-model="user.id" />

		<div class="form-group">
			<input type="text" placeholder="First Name" name="fname" ng-model="user.fname" required />
			<span ng-show="userform.fname.$dirty && userform.fname.$invalid">First Name is required</span>
		</div>


		<div class="form-group">
			<input type="text" name="lname" placeholder="Last Name" ng-model="user.lname" required />
			<span ng-show="userform.lname.$dirty && userform.lname.$invalid">Last Name is required</span>
		</div>

		<div class="form-group">
			<input type="email" name="email" placeholder = "Email" ng-model="user.email" required />
			<div ng-show="userform.email.$dirty && userform.email.$invalid">
				<span ng-show="userform.email.$error.required">Email is required</span>
				<span ng-show="userform.email.$error.email">Please enter a valid email</span>
			</div>
		</div>

		<div class="form-group">
			<input type="text" name="username" placeholder = "Username" ng-model="user.username" />
			<span ng-show="userform.username.$dirty && userform.username.$invalid">Username is required</span>
		</div>

		<div class="form-group">
			<input type="password" name="password" placeholder= "Password" ng-model="user.password" />
			<span ng-show="userform.password.$dirty && userform.password.$invalid">Password is required</span>
		</div>

		<button ng-disabled="userform.$invalid" ng-click="save()">Save User</button>
	</form>

	<h2>Entries</h2>
	<table class="table">
		<thead>
			<tr>
				<th>First Name</th>
				<th>Last Name</td>
				<th>Email</td>
				<th>Username</td>
				<th>Password</td>
				<th></th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="user in users">
				<td>{{ user.fname }}</td>
				<td>{{ user.lname }}</td>
				<td>{{ user.email }}</td>
				<td>{{ user.username }}</td>
				<td>{{ user.password }}</td>
				<td><a href="#" ng-click="edit(user.id)">Edit</a></td>
				<td><a href="#" ng-click="delete(user.id)">Delete</a></td>
			</tr>
		</tbody>
	</table>


	<script type="text/javascript" src = "scripts/vendor/angular.js"></script>
	<script type="text/javascript" src = "scripts/vendor/angular-route.js"></script>
	<script type="text/javascript" src="scripts/app.js"></script>
	<script type="text/javascript" src="scripts/controllers/usersController.js"></script>
	<script type="text/javascript" src="scripts/services/usersFactory.js"></script>
	</body>
</html>