-
Notifications
You must be signed in to change notification settings - Fork 0
/
angulartutorial5.html
136 lines (101 loc) · 4.13 KB
/
angulartutorial5.html
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html ng-app="app5" ng-cloak>
<head>
<title>AngularJS Tutorial 5</title>
<style>
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none;
}
table{
width: 400px;
text-align: left;
border: 2px solid black;
padding: 10px;
}
input.ng-dirty.ng-invalid {
border-color: red;
}
</style>
</head>
<body>
<div id="groceryList" ng-controller="gListCtrl">
<h3>Grocery List</h3>
<table>
<thead>
<tr>
<th>Item</th>
<th>Purchased</th>
<tr>
</thead>
<tr ng-repeat="grocery in groceries">
<td>{{grocery.item}}</td>
<td>
<!-- Bind the checkbox to the data model -->
<input type="checkbox" ng-model="grocery.purchased" />
</td>
</tr>
</table>
<br>
<!-- User enters a new item and when the button is clicked
the value in the input box is added to the array -->
<label>New Item :
<input type="text" ng-model="newItem" />
</label>
<button ng-click="addItem(newItem)">Add Item</button>
<!-- Error shows here if no item was entered -->
<h4>{{missingNewItemError}}</h4>
</div> <!-- End of groceryList -->
<div ng-controller="userCtrl">
<!-- Pass the user data to saveUser() -->
<form name="userForm" ng-submit="saveUser(userInfo)">
<label>First Name:</label>
<!-- Define that a value is required and it must be 2 characters in length or more -->
<input type="text" name="fName" ng-model="userInfo.fName"
ng-required="true" ng-minlength="2" />
<!-- $dirty is set to true if a user interacts with a element and then we check if the elements required field is true -->
<span class="error-message" ng-show="userForm.fName.$dirty
&& userForm.fName.$error.required">Must Enter a First Name
</span>
<!-- Check if the element has been edited and whether it contains at least 2 characters -->
<span class="error-message" ng-show="userForm.fName.$dirty
&& userForm.fName.$error.minlength">Must be a Minimum of 2 Characters</span>
<br><br>
<label>Last Name:</label>
<input type="text" name="lName" ng-model="userInfo.lName"
ng-required="true" ng-minlength="2" />
<span class="error-message" ng-show="userForm.lName.$dirty
&& userForm.lName.$error.required">Must Enter a Last Name
</span>
<span class="error-message" ng-show="userForm.lName.$dirty
&& userForm.lName.$error.minlength">Must be a Minimum of 2 Characters</span>
<br><br>
<label>Street:</label>
<input type="text" name="street" ng-model="userInfo.street"
ng-required="true" ng-minlength="6" ng-pattern="/^(\d{3,})\s?(\w{0,5})\s([a-zA-Z]{2,30})\s([a-zA-Z]{2,15})\.?\s?(\w{0,5})$/" />
<span class="error-message" ng-show="userForm.street.$dirty
&& userForm.street.$invalid">Must Enter a Number, Street and Street Type (ex: 123 Main St)
</span>
<br><br>
<label>Subscribe:</label>
<input type="checkbox" name="subscribe" ng-model="userInfo.subscribe" ng-true-value="'Subscribe'" ng-false-value="'Don\'t Subscribe'" />
<br><br>
<label>Delivery Method:</label>
<select name="delivery" ng-model="userInfo.delivery" ng-required="true">
<option value="Email">Email</option>
<option value="Mail">Mail</option>
</select>
<br><br>
<!-- Disable the button until every element in the form is valid -->
<input type="submit" value="Save" ng-disabled="userForm.$invalid"/>
<!-- Output new users -->
<ul>
<li ng-repeat = "item in user">
{{ 'User: ' + item.fName + " " + item.lName + " " + item.street +
" " + item.subscribe + " " + item.delivery}}
</li>
</ul>
</div> <!-- End of userCtrl -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/exam5.js"></script>
</body>
</html>