홍길동 / 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
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
<style>
span {
background-color: #cce;
}
</style>
</head>
<body ng-controller="MainCtrl as ctrl">
<input type="text" ng-model="ctrl.username"/>
You typed {{ctrl.username}}
<script type="text/javascript">
angular.module('notesApp', []).controller('MainCtrl', [
function () {
var self = this;
self.username = 'nothing';
}
]);
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
<style>
span {
background-color: #cce;
}
</style>
</head>
<body ng-controller="MainCtrl as ctrl">
<input type="text" ng-model="ctrl.username"/>
<input type="password" ng-model="ctrl.password"/>
<button ng-click="ctrl.change()">Change values</button>
<button ng-click="ctrl.submit()">Submit</button>
<script type="text/javascript">
angular.module('notesApp', []).controller('MainCtrl', [
function () {
var self = this;
self.change = function () {
self.username = 'changed';
self.password = 'password';
};
self.submit = function () {
console.log('user clicked submit with ',
self.username, self.password);
};
}
]);
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
<style>
span {
background-color: #cce;
}
</style>
</head>
<body ng-controller="MainCtrl as ctrl">
<!--
- Note, using a form has the advantage of reacting to RETURN triggering
- the submit, as well as pressing the submit button.
-->
<form ng-submit="ctrl.submit()">
<input type="text" placeholder="username" ng-model="ctrl.user.username"/>
<input type="password" placeholder="password" ng-model="ctrl.user.password"/>
<input type="submit" value="Submit"/>
<p></p>
<textarea cols="60" rows="5" ng-model="ctrl.user.notes" placeholder="Notes">
</textarea>
<p>
NOTES:
<div>
{{ctrl.user.notes}}
</div>
</p>
</form>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function () {
var self = this;
self.submit = function () {
console.log('User clicked submit with ', self.user);
};
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
<style>
span {
background-color: #cce;
}
</style>
</head>
<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit1()">
<input type="text" placeholder="username" ng-model="ctrl.username"/>
<input type="password" placeholder="password" ng-model="ctrl.password"/>
<input type="submit" value="Submit"/>
</form>
<!-- Better way of structuring the form data -->
<form ng-submit="ctrl.submit2()">
<input type="text" placeholder="username" ng-model="ctrl.user.username"/>
<input type="password" placeholder="password" ng-model="ctrl.user.password"/>
<input type="submit" value="Submit"/>
</form>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function () {
var self = this;
self.submit1 = function () {
// create user object to send to server
var user = {username: self.username, password: self.password};
console.log('First submit: ', user);
};
self.submit2 = function () {
console.log('Second submit: ', self.user);
};
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
<style>
span {
background-color: #cce;
}
</style>
</head>
<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit()" name="myForm">
<input type="text"
placeholder="username"
ng-model="ctrl.user.username"
required
ng-minlength="4"/>
<input type="password"
placeholder="password"
ng-model="ctrl.user.password"
required/>
<input type="submit"
value="Submit"
ng-disabled="myForm.$invalid"/>
</form>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function () {
var self = this;
self.submit = function () {
console.log('Submit: ', self.user);
};
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit()" name="myForm">
<input type="text"
name="uname"
placeholder="username"
ng-model="ctrl.user.username"
required
ng-minlength="4"/>
<span ng-show="myForm.uname.$error.required">
This is a required field
</span>
<span ng-show="myForm.uname.$error.minlength">
Minimum length required is 4
</span>
<span ng-show="myForm.uname.$invalid">
This field is invalid
</span>
<br/>
<input type="password"
name="pwd"
placeholder="password"
ng-model="ctrl.user.password"
required/>
<span ng-show="myForm.pwd.$error.required">
This is a required field
</span>
<br/>
<input type="submit"
value="Submit"
ng-disabled="myForm.$invalid"/>
</form>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function () {
var self = this;
self.submit = function () {
console.log('Submit: ', self.user);
};
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
<style>
.username.ng-valid {
background-color: greenyellow;
}
.username.ng-dirty.ng-invalid-required {
background-color: hotpink;
}
.username.ng-dirty.ng-invalid-minlength {
background-color: lightpink;
}
</style>
</head>
<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit()" name="myForm">
<input type="text"
class="username"
name="uname"
placeholder="username"
ng-model="ctrl.user.username"
required
ng-minlength="4"/>
<input type="submit"
value="Submit"
ng-disabled="myForm.$invalid"/>
</form>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function () {
var self = this;
self.submit = function () {
console.log('Submit: ', self.user);
};
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app>
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
</head>
<!-- no controller in this example -->
<body>
<form novalidate name="myForm">
<input type="text"
class="username"
name="uname"
ng-model="ctrl.user.username"
required=""
placeholder="Username"
ng-minlength="4"/>
<input type="password"
class="password"
name="pad"
ng-model="ctrl.user.password"
required=""
placeholder="Password"
required=""/>
<p/>
<ng-form name="profile">
<input type="text"
name="firstName"
ng-model="ctrl.user.profile.firstName"
placeholder="First Name"
required/>
<input type="text"
name="middleName"
ng-model="ctrl.user.profile.middleName"
placeholder="Middle Name"/>
<input type="text"
name="lastName"
ng-model="ctrl.user.profile.lastName"
placeholder="Last Name"
required/>
<input type="date"
name="dob"
placeholder="Date of birth"
ng-model="ctrl.user.profile.dob"/>
</ng-form>
<span ng-show="myForm.profile.$invalid">
Please fill out the profile information
</span>
<p/>
<input type="submit"
value="Submit"
ng-disabled="myForm.$invalid"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<div>
<h2>What are your favorite sports?</h2>
<div ng-repeat="sport in ctrl.sports">
<label ng-bind="sport.label"></label>
<div>
With binding:
<input type="checkbox"
ng-model="sport.selected"
ng-true-value="'YES'"
ng-false-value="'NO'"/>
</div>
<div>
using ng-checked:
<input type="checkbox"
ng-checked="sport.selected === 'YES'"/>
</div>
<div>
Current state: {{sport.selected}}
</div>
<br/>
</div>
</div>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function () {
var self = this;
self.sports = [
{label: 'Basketball', selected: 'YES'},
{label: 'Cricket', selected: 'NO'},
{label: 'Soccer', selected: 'NO'},
{label: 'Swimming', selected: 'YES'}
];
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<div>
<h2>Radio Buttons</h2>
<div ng-init="user.gender = 'female'">
<input type="radio"
name="gender"
ng-model="user.gender"
value="male"/>Male
<input type="radio"
name="gender"
ng-model="user.gender"
value="female"/>Female
</div>
</div>
<div>
<h2>Radio Buttons two</h2>
<div ng-init="user.gender2 = 'male'; otherGender = 'Other'">
<input type="radio"
name="gender2"
ng-model="user.gender2"
value="male"/>Male
<input type="radio"
name="gender2"
ng-model="user.gender2"
value="female"/>Female
<input type="radio"
name="gender2"
ng-model="user.gender2"
ng-value="otherGender"/>{{otherGender}}
</div>
</div>
<div>
<h2>Radio Buttons three</h2>
<div ng-repeat="ch in ctrl.choices">
<input type="radio"
name="choice"
ng-model="user.choice"
ng-value="ch"/>{{ch}}
</div>
</div>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function () {
var self = this;
self.choices = ['foo', 'bar', 'baz', 'zoo', 'goo'];
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<title>Notes App</title>
<script src="../../tp/angular.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<div>
<select ng-model="ctrl.selectedCountryId"
ng-options="c.id as c.label for c in ctrl.countries">
</select>
Selected Country ID: {{ctrl.selectedCountryId}}
</div>
<div>
<select ng-model="ctrl.selectedCountry"
ng-options="c.label for c in ctrl.countries track by c.id">
</select>
Selected Country: {{ctrl.selectedCountry}}
</div>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function () {
var self = this;
self.countries = [
{label: 'UK', id: 1},
{label: 'USA', id: 2},
{label: 'France', id: 3},
{label: 'Italy', id: 4}
];
var first = self.countries[0];
self.selectedCountryId = first.id;
self.selectedCountry = first;
}]);
</script>
</body>
</html>