|
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
|
<!--form.html-->
<!DOCTYPE html>
<
html
ng-app
=
"firstMoudule"
lang
=
"zh-CN"
>
<
head
>
<
meta
charset
=
'utf-8'
>
<
link
rel
=
"stylesheet"
href
=
"http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css"
>
<
link
rel
=
"stylesheet"
href
=
"../CSS/style.css"
>
</
head
>
<
body
>
<
div
class
=
"container"
ng-controller
=
"firstController"
>
<
form
class
=
"form-horizontal"
name
=
"myForm"
>
<
div
class
=
"form-group"
ng-class
=
"{'has-warning':(myForm.username.$error.minlength||myForm.username.$error.maxlength||myForm.username.$error.required && myForm.username.$dirty),'has-success':((!myForm.username.$error.minlength)&&(!myForm.username.$error.required)&&(!myForm.username.$error.maxlength))}"
>
<
label
for
=
"inputUsername"
class
=
"col-sm-4 control-label"
>Your Username</
label
>
<
div
class
=
"col-sm-4"
>
<
input
type
=
"text"
class
=
"form-control"
id
=
"inputUsername"
placeholder
=
"Your Username"
autocomplete
=
"false"
ng-required
=
"true"
ng-model
=
"data.username"
name
=
"username"
ng-minlength
=
"6"
ng-maxlength
=
"20"
>
</
div
>
<
div
ng-show
=
"myForm.username.$error.minlength||myForm.username.$error.maxlength||myForm.username.$error.required&&myForm.username.$dirty"
class
=
"col-sm-1 info-block"
><
span
class
=
"glyphicon glyphicon-remove"
></
span
></
div
>
<
div
ng-show
=
"(!myForm.username.$error.minlength)&&(!myForm.username.$error.required)&&(!myForm.username.$error.maxlength)"
class
=
"col-sm-1 info-block"
><
span
class
=
"glyphicon glyphicon-ok"
></
span
></
div
>
</
div
>
<
div
class
=
"form-group"
ng-class
=
"{'has-warning':(myForm.email.$error.email||myForm.email.$error.required&&myForm.email.$dirty),'has-success':((!myForm.email.$error.email)&&(!myForm.email.$error.required))}"
>
<
label
for
=
"inputEmail3"
class
=
"col-sm-4 control-label"
>Your Email</
label
>
<
div
class
=
"col-sm-4"
>
<
input
type
=
"email"
class
=
"form-control"
id
=
"inputEmail3"
placeholder
=
"Your Email"
autocomplete
=
"false"
ng-required
=
"true"
ng-model
=
"data.email"
name
=
"email"
>
</
div
>
<
div
ng-show
=
"myForm.email.$error.email||myForm.email.$error.required&&myForm.email.$dirty"
class
=
"col-sm-1 info-block"
><
span
class
=
"glyphicon glyphicon-remove"
></
span
></
div
>
<
div
ng-show
=
"(!myForm.email.$error.email) && (!myForm.email.$error.required)"
class
=
"col-sm-1 info-block"
><
span
class
=
"glyphicon glyphicon-ok"
></
span
></
div
>
</
div
>
<
div
class
=
"form-group"
ng-class
=
"{'has-warning':(myForm.password.$error.pattern||myForm.password.$error.required&&myForm.password.$dirty),'has-success':((!myForm.password.$error.pattern)&&(!myForm.password.$error.required))}"
>
<
label
for
=
"inputPassword"
class
=
"col-sm-4 control-label"
>Your Password</
label
>
<
div
class
=
"col-sm-4"
>
<
input
type
=
"password"
class
=
"form-control"
id
=
"inputPassword"
placeholder
=
"Your Password"
ng-pattern
=
"/^\w{6,18}$/"
ng-required
=
"true"
ng-model
=
"data.password"
name
=
"password"
>
</
div
>
<
div
ng-show
=
"myForm.password.$error.pattern||myForm.password.$error.required&&myForm.password.$dirty"
class
=
"col-sm-1 info-block"
><
span
class
=
"glyphicon glyphicon-remove"
></
span
></
div
>
<
div
ng-show
=
"(!myForm.password.$error.pattern)&&(!myForm.password.$error.required)"
class
=
"col-sm-1 info-block"
><
span
class
=
"glyphicon glyphicon-ok"
></
span
></
div
>
</
div
>
<
div
class
=
"form-group"
ng-class
=
"{'has-warning':(data.passwordRe!==data.password||myForm.passwordRe.$error.required&&myForm.passwordRe.$dirty),'has-success':(data.passwordRe===data.password&&(!myForm.passwordRe.$error.required))}"
>
<
label
for
=
"inputPasswordRe"
class
=
"col-sm-4 control-label"
>Repeat Password</
label
>
<
div
class
=
"col-sm-4"
>
<
input
type
=
"password"
class
=
"form-control"
id
=
"inputPasswordRe"
placeholder
=
"Repeat Password"
ng-required
=
"true"
ng-model
=
"data.passwordRe"
name
=
"passwordRe"
>
</
div
>
<
div
ng-show
=
"data.passwordRe!==data.password||myForm.passwordRe.$error.required&&myForm.passwordRe.$dirty"
class
=
"col-sm-1 info-block"
><
span
class
=
"glyphicon glyphicon-remove"
></
span
></
div
>
<
div
ng-show
=
"data.passwordRe===data.password&&(!myForm.passwordRe.$error.required)"
class
=
"col-sm-1 info-block"
><
span
class
=
"glyphicon glyphicon-ok"
></
span
></
div
>
</
div
>
<
div
class
=
"form-group"
ng-class
=
"{'has-warning':(myForm.site.$error.url||myForm.site.$error.required&&myForm.site.$dirty),'has-success':((!myForm.site.$error.email)&&(!myForm.site.$error.required))}"
>
<
label
for
=
"inputSite"
class
=
"col-sm-4 control-label"
>Your Site</
label
>
<
div
class
=
"col-sm-4"
>
<
input
type
=
"url"
class
=
"form-control"
id
=
"inputSite"
placeholder
=
"Your Site"
autocomplete
=
"false"
ng-required
=
"true"
ng-model
=
"data.site"
name
=
"site"
>
</
div
>
<
div
ng-show
=
"myForm.site.$error.email||myForm.site.$error.required&&myForm.site.$dirty"
class
=
"col-sm-1 info-block"
><
span
class
=
"glyphicon glyphicon-remove"
></
span
></
div
>
<
div
ng-show
=
"(!myForm.site.$error.url) && (!myForm.site.$error.required)"
class
=
"col-sm-1 info-block"
><
span
class
=
"glyphicon glyphicon-ok"
></
span
></
div
>
</
div
>
<
div
class
=
"form-group"
ng-class
=
"{'has-warning':(myForm.age.$error.min||myForm.age.$error.max||myForm.age.$error.required&&myForm.age.$dirty),'has-success':((!myForm.age.$error.min)&&(!myForm.age.$error.required)&&(!myForm.age.$error.max))}"
>
<
label
for
=
"inputAge"
class
=
"col-sm-4 control-label"
>Your Age</
label
>
<
div
class
=
"col-sm-4"
>
<
input
type
=
"number"
class
=
"form-control"
id
=
"inputAge"
placeholder
=
"Your Age"
autocomplete
=
"false"
ng-required
=
"true"
ng-model
=
"data.age"
name
=
"age"
max
=
"120"
min
=
"18"
>
</
div
>
<
div
ng-show
=
"(myForm.age.$error.min||myForm.age.$error.max||myForm.age.$error.required&&myForm.age.$dirty)"
class
=
"col-sm-1 info-block"
><
span
class
=
"glyphicon glyphicon-remove"
></
span
></
div
>
<
div
ng-show
=
"((!myForm.age.$error.min)&&(!myForm.age.$error.required)&&(!myForm.age.$error.max))"
class
=
"col-sm-1 info-block"
><
span
class
=
"glyphicon glyphicon-ok"
></
span
></
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"inputSex"
class
=
"col-sm-4 control-label"
>Your Sex</
label
>
<
div
class
=
"col-sm-4"
>
<
label
class
=
"radio-inline"
>
<
input
type
=
"radio"
name
=
"sex"
value
=
"1"
ng-model
=
"data.sex"
>male
</
label
>
<
label
class
=
"radio-inline"
>
<
input
type
=
"radio"
name
=
"sex"
value
=
"0"
ng-model
=
"data.sex"
>female
</
label
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"inputHobby"
class
=
"col-sm-4 control-label"
>Your Hobby</
label
>
<
div
class
=
"col-sm-4"
>
<
label
class
=
"checkbox-inline"
ng-repeat
=
"hobby in hobbies"
>
<
input
type
=
"checkbox"
name
=
"hobby"
value
=
"hobby.id"
ng-click
=
"toggleHobbySelection(hobby.id)"
ng-checked
=
"hobbyData.hobbies.indexOf(hobby.id)!==-1"
>`hobby`.`name`
</
label
>
</
div
>
</
div
>
</
form
>
</
div
>
<
script
src
=
"http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"
></
script
>
<
script
src
=
"../JS/controllers.js"
></
script
>
</
body
>
</
html
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/*style.css*/
.container {
margin-top
:
40px
;
}
.glyphicon {
padding-top
:
8px
;
}
.glyphicon-remove {
color
:
red
;
}
.glyphicon-ok {
color
:
green
;
}
.info-
block
{
padding-left
:
0px
;
}
|
|
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
|
// controllers.js
angular.module(
'firstMoudule'
, [])
.service(
'hobbyDataService'
,
function
() {
return
{
hobbies: [1, 3]
}
})
.controller(
'firstController'
, [
'$scope'
,
'hobbyDataService'
,
function
($scope, hobbyDataService) {
$scope.hobbies = [{
id: 1,
name:
'coding'
}, {
id: 2,
name:
'soccer'
}, {
id: 3,
name:
'reading'
}, {
id: 4,
name:
'sleeping'
}];
$scope.hobbyData = hobbyDataService;
$scope.toggleHobbySelection =
function
(id) {
var
index = $scope.hobbyData.hobbies.indexOf(id);
if
(index === -1) {
$scope.hobbyData.hobbies.push(id);
}
else
{
$scope.hobbyData.hobbies.splice(index, 1);
}
console.log($scope.hobbyData.hobbies);
}
}]);
|
页面效果
本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1671001，如需转载请自行联系原作者
