홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
d7c203cc 1 parent 449630f0

GUI - Angular:: More sample HTML for form widgets etc. 

Change-Id: Ibfc83aae8282e3d99b53a03ab0e13ef2579e990c
Inline Side-by-side
Showing 11 changed files with 511 additions and 0 deletions
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 + <style>
7 + span {
8 + background-color: #cce;
9 + }
10 + </style>
11 +</head>
12 +<body ng-controller="MainCtrl as ctrl">
13 +
14 +<input type="text" ng-model="ctrl.username"/>
15 +You typed {{ctrl.username}}
16 +
17 +
18 +<script type="text/javascript">
19 + angular.module('notesApp', []).controller('MainCtrl', [
20 + function () {
21 + var self = this;
22 + self.username = 'nothing';
23 + }
24 + ]);
25 +</script>
26 +
27 +</body>
28 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 + <style>
7 + span {
8 + background-color: #cce;
9 + }
10 + </style>
11 +</head>
12 +<body ng-controller="MainCtrl as ctrl">
13 +
14 +<input type="text" ng-model="ctrl.username"/>
15 +<input type="password" ng-model="ctrl.password"/>
16 +<button ng-click="ctrl.change()">Change values</button>
17 +<button ng-click="ctrl.submit()">Submit</button>
18 +
19 +
20 +
21 +
22 +<script type="text/javascript">
23 + angular.module('notesApp', []).controller('MainCtrl', [
24 + function () {
25 + var self = this;
26 + self.change = function () {
27 + self.username = 'changed';
28 + self.password = 'password';
29 + };
30 +
31 + self.submit = function () {
32 + console.log('user clicked submit with ',
33 + self.username, self.password);
34 + };
35 + }
36 + ]);
37 +</script>
38 +
39 +</body>
40 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 + <style>
7 + span {
8 + background-color: #cce;
9 + }
10 + </style>
11 +</head>
12 +<body ng-controller="MainCtrl as ctrl">
13 +
14 +<!--
15 + - Note, using a form has the advantage of reacting to RETURN triggering
16 + - the submit, as well as pressing the submit button.
17 + -->
18 +<form ng-submit="ctrl.submit()">
19 + <input type="text" placeholder="username" ng-model="ctrl.user.username"/>
20 + <input type="password" placeholder="password" ng-model="ctrl.user.password"/>
21 + <input type="submit" value="Submit"/>
22 + <p></p>
23 + <textarea cols="60" rows="5" ng-model="ctrl.user.notes" placeholder="Notes">
24 + </textarea>
25 + <p>
26 + NOTES:
27 + <div>
28 + {{ctrl.user.notes}}
29 + </div>
30 + </p>
31 +</form>
32 +
33 +<script type="text/javascript">
34 + angular.module('notesApp', [])
35 + .controller('MainCtrl', [function () {
36 + var self = this;
37 +
38 + self.submit = function () {
39 + console.log('User clicked submit with ', self.user);
40 + };
41 + }]);
42 +</script>
43 +
44 +</body>
45 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 + <style>
7 + span {
8 + background-color: #cce;
9 + }
10 + </style>
11 +</head>
12 +<body ng-controller="MainCtrl as ctrl">
13 +
14 +<form ng-submit="ctrl.submit1()">
15 + <input type="text" placeholder="username" ng-model="ctrl.username"/>
16 + <input type="password" placeholder="password" ng-model="ctrl.password"/>
17 + <input type="submit" value="Submit"/>
18 +</form>
19 +
20 +<!-- Better way of structuring the form data -->
21 +<form ng-submit="ctrl.submit2()">
22 + <input type="text" placeholder="username" ng-model="ctrl.user.username"/>
23 + <input type="password" placeholder="password" ng-model="ctrl.user.password"/>
24 + <input type="submit" value="Submit"/>
25 +</form>
26 +
27 +<script type="text/javascript">
28 + angular.module('notesApp', [])
29 + .controller('MainCtrl', [function () {
30 + var self = this;
31 +
32 + self.submit1 = function () {
33 + // create user object to send to server
34 + var user = {username: self.username, password: self.password};
35 + console.log('First submit: ', user);
36 + };
37 + self.submit2 = function () {
38 + console.log('Second submit: ', self.user);
39 + };
40 + }]);
41 +</script>
42 +
43 +</body>
44 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 + <style>
7 + span {
8 + background-color: #cce;
9 + }
10 + </style>
11 +</head>
12 +<body ng-controller="MainCtrl as ctrl">
13 +
14 +<form ng-submit="ctrl.submit()" name="myForm">
15 + <input type="text"
16 + placeholder="username"
17 + ng-model="ctrl.user.username"
18 + required
19 + ng-minlength="4"/>
20 +
21 + <input type="password"
22 + placeholder="password"
23 + ng-model="ctrl.user.password"
24 + required/>
25 +
26 + <input type="submit"
27 + value="Submit"
28 + ng-disabled="myForm.$invalid"/>
29 +</form>
30 +
31 +<script type="text/javascript">
32 + angular.module('notesApp', [])
33 + .controller('MainCtrl', [function () {
34 + var self = this;
35 + self.submit = function () {
36 + console.log('Submit: ', self.user);
37 + };
38 + }]);
39 +</script>
40 +
41 +</body>
42 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<body ng-controller="MainCtrl as ctrl">
8 +
9 +<form ng-submit="ctrl.submit()" name="myForm">
10 + <input type="text"
11 + name="uname"
12 + placeholder="username"
13 + ng-model="ctrl.user.username"
14 + required
15 + ng-minlength="4"/>
16 + <span ng-show="myForm.uname.$error.required">
17 + This is a required field
18 + </span>
19 + <span ng-show="myForm.uname.$error.minlength">
20 + Minimum length required is 4
21 + </span>
22 + <span ng-show="myForm.uname.$invalid">
23 + This field is invalid
24 + </span>
25 + <br/>
26 +
27 + <input type="password"
28 + name="pwd"
29 + placeholder="password"
30 + ng-model="ctrl.user.password"
31 + required/>
32 + <span ng-show="myForm.pwd.$error.required">
33 + This is a required field
34 + </span>
35 + <br/>
36 +
37 + <input type="submit"
38 + value="Submit"
39 + ng-disabled="myForm.$invalid"/>
40 +</form>
41 +
42 +<script type="text/javascript">
43 + angular.module('notesApp', [])
44 + .controller('MainCtrl', [function () {
45 + var self = this;
46 + self.submit = function () {
47 + console.log('Submit: ', self.user);
48 + };
49 + }]);
50 +</script>
51 +
52 +</body>
53 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 + <style>
7 + .username.ng-valid {
8 + background-color: greenyellow;
9 + }
10 + .username.ng-dirty.ng-invalid-required {
11 + background-color: hotpink;
12 + }
13 + .username.ng-dirty.ng-invalid-minlength {
14 + background-color: lightpink;
15 + }
16 + </style>
17 +</head>
18 +<body ng-controller="MainCtrl as ctrl">
19 +
20 +<form ng-submit="ctrl.submit()" name="myForm">
21 + <input type="text"
22 + class="username"
23 + name="uname"
24 + placeholder="username"
25 + ng-model="ctrl.user.username"
26 + required
27 + ng-minlength="4"/>
28 +
29 + <input type="submit"
30 + value="Submit"
31 + ng-disabled="myForm.$invalid"/>
32 +</form>
33 +
34 +<script type="text/javascript">
35 + angular.module('notesApp', [])
36 + .controller('MainCtrl', [function () {
37 + var self = this;
38 + self.submit = function () {
39 + console.log('Submit: ', self.user);
40 + };
41 + }]);
42 +</script>
43 +
44 +</body>
45 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app>
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<!-- no controller in this example -->
8 +<body>
9 +
10 +<form novalidate name="myForm">
11 + <input type="text"
12 + class="username"
13 + name="uname"
14 + ng-model="ctrl.user.username"
15 + required=""
16 + placeholder="Username"
17 + ng-minlength="4"/>
18 +
19 + <input type="password"
20 + class="password"
21 + name="pad"
22 + ng-model="ctrl.user.password"
23 + required=""
24 + placeholder="Password"
25 + required=""/>
26 +
27 + <p/>
28 +
29 + <ng-form name="profile">
30 + <input type="text"
31 + name="firstName"
32 + ng-model="ctrl.user.profile.firstName"
33 + placeholder="First Name"
34 + required/>
35 + <input type="text"
36 + name="middleName"
37 + ng-model="ctrl.user.profile.middleName"
38 + placeholder="Middle Name"/>
39 + <input type="text"
40 + name="lastName"
41 + ng-model="ctrl.user.profile.lastName"
42 + placeholder="Last Name"
43 + required/>
44 +
45 + <input type="date"
46 + name="dob"
47 + placeholder="Date of birth"
48 + ng-model="ctrl.user.profile.dob"/>
49 + </ng-form>
50 +
51 + <span ng-show="myForm.profile.$invalid">
52 + Please fill out the profile information
53 + </span>
54 +
55 + <p/>
56 +
57 + <input type="submit"
58 + value="Submit"
59 + ng-disabled="myForm.$invalid"/>
60 +</form>
61 +
62 +</body>
63 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<body ng-controller="MainCtrl as ctrl">
8 +
9 + <div>
10 + <h2>What are your favorite sports?</h2>
11 + <div ng-repeat="sport in ctrl.sports">
12 + <label ng-bind="sport.label"></label>
13 + <div>
14 + With binding:
15 + <input type="checkbox"
16 + ng-model="sport.selected"
17 + ng-true-value="'YES'"
18 + ng-false-value="'NO'"/>
19 + </div>
20 + <div>
21 + using ng-checked:
22 + <input type="checkbox"
23 + ng-checked="sport.selected === 'YES'"/>
24 + </div>
25 + <div>
26 + Current state: {{sport.selected}}
27 + </div>
28 + <br/>
29 + </div>
30 +
31 + </div>
32 +
33 + <script type="text/javascript">
34 + angular.module('notesApp', [])
35 + .controller('MainCtrl', [function () {
36 + var self = this;
37 + self.sports = [
38 + {label: 'Basketball', selected: 'YES'},
39 + {label: 'Cricket', selected: 'NO'},
40 + {label: 'Soccer', selected: 'NO'},
41 + {label: 'Swimming', selected: 'YES'}
42 + ];
43 + }]);
44 + </script>
45 +
46 +</body>
47 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<body ng-controller="MainCtrl as ctrl">
8 +
9 + <div>
10 + <h2>Radio Buttons</h2>
11 + <div ng-init="user.gender = 'female'">
12 + <input type="radio"
13 + name="gender"
14 + ng-model="user.gender"
15 + value="male"/>Male
16 + <input type="radio"
17 + name="gender"
18 + ng-model="user.gender"
19 + value="female"/>Female
20 + </div>
21 + </div>
22 +
23 + <div>
24 + <h2>Radio Buttons two</h2>
25 + <div ng-init="user.gender2 = 'male'; otherGender = 'Other'">
26 + <input type="radio"
27 + name="gender2"
28 + ng-model="user.gender2"
29 + value="male"/>Male
30 + <input type="radio"
31 + name="gender2"
32 + ng-model="user.gender2"
33 + value="female"/>Female
34 + <input type="radio"
35 + name="gender2"
36 + ng-model="user.gender2"
37 + ng-value="otherGender"/>{{otherGender}}
38 + </div>
39 + </div>
40 +
41 + <div>
42 + <h2>Radio Buttons three</h2>
43 + <div ng-repeat="ch in ctrl.choices">
44 + <input type="radio"
45 + name="choice"
46 + ng-model="user.choice"
47 + ng-value="ch"/>{{ch}}
48 +
49 + </div>
50 + </div>
51 +
52 +
53 + <script type="text/javascript">
54 + angular.module('notesApp', [])
55 + .controller('MainCtrl', [function () {
56 + var self = this;
57 +
58 + self.choices = ['foo', 'bar', 'baz', 'zoo', 'goo'];
59 + }]);
60 + </script>
61 +
62 +</body>
63 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<body ng-controller="MainCtrl as ctrl">
8 +
9 + <div>
10 + <select ng-model="ctrl.selectedCountryId"
11 + ng-options="c.id as c.label for c in ctrl.countries">
12 + </select>
13 + Selected Country ID: {{ctrl.selectedCountryId}}
14 + </div>
15 +
16 + <div>
17 + <select ng-model="ctrl.selectedCountry"
18 + ng-options="c.label for c in ctrl.countries track by c.id">
19 + </select>
20 + Selected Country: {{ctrl.selectedCountry}}
21 + </div>
22 +
23 + <script type="text/javascript">
24 + angular.module('notesApp', [])
25 + .controller('MainCtrl', [function () {
26 + var self = this;
27 +
28 + self.countries = [
29 + {label: 'UK', id: 1},
30 + {label: 'USA', id: 2},
31 + {label: 'France', id: 3},
32 + {label: 'Italy', id: 4}
33 + ];
34 + var first = self.countries[0];
35 + self.selectedCountryId = first.id;
36 + self.selectedCountry = first;
37 + }]);
38 + </script>
39 +
40 +</body>
41 +</html>