FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
ionic/test/html/input-radio-patch.html at master · Java1024/ionic · GitHub
Java1024
ionic
Repository navigation
Code
Pull requests
Actions
Projects
Security and quality
Insights
Expand file tree
Breadcrumbs
ionic
/
test
/
html
/
input-radio-patch.html
Copy path
More file actions
More file actions
Latest commit
History
History
History
96 lines (84 loc) · 2.66 KB
Breadcrumbs
ionic
/
test
/
html
/
input-radio-patch.html
Copy path
File metadata and controls
96 lines (84 loc) · 2.66 KB
Raw
Copy raw file
Download raw file
Open symbols panel
Edit and raw actions
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
<
html
ng-app
="
ionicApp
"
>
<
head
>
<
meta
charset
="
utf-8
"
>
<
meta
name
="
viewport
"
content
="
initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width
"
>
<
title
>
Radio Buttons
</
title
>
<
link
rel
="
stylesheet
"
href
="
../../dist/css/ionic.css
"
>
<
script
src
="
../../../../dist/js/ionic.bundle.js
"
>
</
script
>
<
script
>
angular
.
module
(
'ionic'
)
.
directive
(
'ionRadioFix'
,
function
(
)
{
return
{
restrict
:
'E'
,
replace
:
true
,
require
:
'?ngModel'
,
transclude
:
true
,
template
:
'<label class="item item-radio">'
+
'<input type="radio" name="radio-group">'
+
'<div class="radio-content">'
+
'<div class="item-content disable-pointer-events" ng-transclude></div>'
+
'<i class="radio-icon disable-pointer-events icon ion-checkmark"></i>'
+
'</div>'
+
'</label>'
,
compile
:
function
(
element
,
attr
)
{
console
.
log
(
'Custom radio running'
)
;
if
(
attr
.
icon
)
{
var
iconElm
=
element
.
find
(
'i'
)
;
iconElm
.
removeClass
(
'ion-checkmark'
)
.
addClass
(
attr
.
icon
)
;
}
var
input
=
element
.
find
(
'input'
)
;
angular
.
forEach
(
{
'name'
:
attr
.
name
,
'value'
:
attr
.
value
,
'disabled'
:
attr
.
disabled
,
'ng-value'
:
attr
.
ngValue
,
'ng-model'
:
attr
.
ngModel
,
'ng-disabled'
:
attr
.
ngDisabled
,
'ng-change'
:
attr
.
ngChange
,
'ng-required'
:
attr
.
ngRequired
,
'required'
:
attr
.
required
}
,
function
(
value
,
name
)
{
if
(
angular
.
isDefined
(
value
)
)
{
input
.
attr
(
name
,
value
)
;
}
}
)
;
return
function
(
scope
,
element
,
attr
)
{
scope
.
getValue
=
function
(
)
{
return
scope
.
ngValue
||
attr
.
value
;
}
;
}
;
}
}
;
}
)
;
</
script
>
<
style
>
.
item-radio
input
:
checked
+
.
radio-content
.
item-content
{
/* style the item content when its checked */
background
:
#
f7f7f7
;
}
.
item-radio
input
:
checked
+
.
radio-content
.
radio-icon
{
/* show the checkmark icon when its checked */
visibility
:
visible;
}
</
style
>
</
head
>
<
body
ng-controller
="
MainCtrl
"
>
<
ion-header-bar
class
="
bar-positive
"
>
<
h1
class
="
title
"
>
Radio Buttons
</
h1
>
</
ion-header-bar
>
<
ion-content
>
{{ formData }}
<
div
class
="
list
"
>
<
ion-radio-fix
ng-model
="
formData.color
"
ng-value
="
'red'
"
name
="
color
"
>
Red
</
ion-radio-fix
>
<
ion-radio-fix
ng-model
="
formData.color
"
ng-value
="
'blue'
"
name
="
color
"
>
Blue
</
ion-radio-fix
>
<
ion-radio-fix
ng-model
="
formData.color
"
ng-value
="
'yellow'
"
name
="
color
"
>
Yellow
</
ion-radio-fix
>
</
div
>
</
ion-content
>
<
script
>
angular
.
module
(
'ionicApp'
,
[
'ionic'
]
)
.
controller
(
'MainCtrl'
,
function
(
$scope
)
{
$scope
.
formData
=
{
}
;
}
)
;
</
script
>
</
body
>
</
html
>
Back
|
FazBrowse Home
|
New Git URL