Skip to content

Commit 50e9671

Browse files
bennadelbennadel
committed
Add ng-model dropdown demo.
1 parent 8259377 commit 50e9671

File tree

5 files changed

+846
-0
lines changed

5 files changed

+846
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Creating An HTML-Based Select Menu In AngularJS Using ngModel And ngModelController](http://bennadel.github.io/JavaScript-Demos/demos/dropdown-ng-model-angularjs/)
1314
* [Experimenting With ngModel And ngModelController In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/ng-model-controller-angularjs/)
1415
* [Link Function And $watch() Callback Timing In AngularJS Directives](http://bennadel.github.io/JavaScript-Demos/demos/link-watch-timeline-angularjs/)
1516
* [Event Delegation Performance vs. Linking Performance In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/event-delegation-vs-linking-angularjs/)

‎demos/dropdown-ng-model-angularjs/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
config.codekit

‎demos/dropdown-ng-model-angularjs/demo.css

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
a[ng-click] {
2+
color: red ;
3+
cursor: pointer ;
4+
text-decoration: underline ;
5+
}
6+
form {
7+
border: 1px solid #CCCCCC ;
8+
padding: 10px 20px 10px 20px ;
9+
position: relative ;
10+
}
11+
form.ng-dirty,
12+
form.ng-invalid-required {
13+
border-color: #FFAAAA ;
14+
}
15+
form.ng-dirty:before,
16+
form.ng-invalid-required:before {
17+
background-color: #CC0000 ;
18+
color: #FFFFFF ;
19+
content: "So dirty!";
20+
left: 0px ;
21+
font-family: monospace ;
22+
font-size: 11px ;
23+
padding: 4px 10px 4px 10px ;
24+
position: absolute ;
25+
top: 0px ;
26+
}
27+
form.ng-invalid-required:before {
28+
content: "Don't leave me hanging!";
29+
}
30+
div.m-dropdown {
31+
position: relative ;
32+
text-decoration: none ;
33+
user-select: none ;
34+
-moz-user-select: none ;
35+
-webkit-user-select: none ;
36+
}
37+
div.m-dropdown div.dropdown-root {
38+
background-color: #FFFFFF ;
39+
border: 1px solid #CCCCCC ;
40+
border-radius: 3px 3px 3px 3px ;
41+
cursor: pointer ;
42+
}
43+
div.m-dropdown ul.dropdown-options {
44+
background-color: #FFFFFF ;
45+
border: 1px solid #CCCCCC ;
46+
border-radius: 0px 0px 3px 3px ;
47+
display: none ;
48+
left: 0px ;
49+
list-style-type: none ;
50+
margin: 0px 0px 0px 0px ;
51+
padding: 0px 0px 0px 0px ;
52+
position: absolute ;
53+
right: 0px ;
54+
top: 100% ;
55+
z-index: 999999 ;
56+
}
57+
div.m-dropdown li.dropdown-option {
58+
border-bottom: 1px solid #CCCCCC ;
59+
cursor: pointer ;
60+
margin: 0px 0px 0px 0px ;
61+
padding: 0px 0px 0px 0px ;
62+
position: relative ;
63+
}
64+
div.m-dropdown li.dropdown-option:last-child {
65+
border-bottom-width: 0px ;
66+
}
67+
div.m-dropdown div.dropdown-label,
68+
div.m-dropdown li.dropdown-label {
69+
padding: 9px 10px 7px 10px ;
70+
position: relative ;
71+
}
72+
div.m-dropdown.dropdown-open div.dropdown-root {
73+
border-bottom-width: 0px ;
74+
border-radius: 3px 3px 0px 0px ;
75+
}
76+
div.m-dropdown.dropdown-open ul.dropdown-options {
77+
display: block ;
78+
}
79+
div.m-dropdown.dropdown-caret div.dropdown-root {
80+
padding-right: 30px ;
81+
}
82+
div.m-dropdown.dropdown-caret div.dropdown-root:after {
83+
border-left: 5px solid transparent ;
84+
border-right: 5px solid transparent ;
85+
border-top: 5px solid #AAAAAA ;
86+
content: "";
87+
height: 0px ;
88+
margin-top: -2px;
89+
position: absolute ;
90+
right: 10px ;
91+
top: 50% ;
92+
width: 0px ;
93+
}
94+
div.m-dropdown {
95+
margin: 20px 0px 20px 0px ;
96+
}
97+
div.m-dropdown div.dropdown-root div.dropdown-label.dropdown-placeholder {
98+
color: #999999 ;
99+
font-style: italic ;
100+
}
101+
div.m-dropdown ul.dropdown-options {
102+
box-shadow: 1px 1px 0px #DADADA ;
103+
}
104+
div.m-dropdown li.dropdown-option.dropdown-label:hover {
105+
background-color: #FAFAFA ;
106+
}
107+
div.m-dropdown li.dropdown-option.dropdown-selection {
108+
background-color: #FFFFCC ;
109+
font-weight: bold ;
110+
padding-left: 27px ;
111+
}
112+
div.m-dropdown li.dropdown-option.dropdown-selection:before {
113+
content: "\00BB";
114+
left: 10px ;
115+
line-height: 32px ;
116+
position: absolute ;
117+
top: 0px ;
118+
}
119+
div.m-dropdown li.dropdown-option.group.all,
120+
div.m-dropdown li.dropdown-option.group.none {
121+
border-left: 4px solid #CCCCCC ;
122+
color: #333333 ;
123+
}
124+
div.m-dropdown.ng-invalid-required div.dropdown-root div.dropdown-label {
125+
background-color: #FFEEEE ;
126+
color: #CC0000 ;
127+
}

‎demos/dropdown-ng-model-angularjs/demo.less

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
a[ ng-click ] {
2+
color: red ;
3+
cursor: pointer ;
4+
text-decoration: underline ;
5+
}
6+
7+
form {
8+
border: 1px solid #CCCCCC ;
9+
padding: 10px 20px 10px 20px ;
10+
position: relative ;
11+
12+
&.ng-dirty,
13+
&.ng-invalid-required {
14+
border-color: #FFAAAA ;
15+
16+
&:before {
17+
background-color: #CC0000 ;
18+
color: #FFFFFF ;
19+
content: "So dirty!" ;
20+
left: 0px ;
21+
font-family: monospace ;
22+
font-size: 11px ;
23+
padding: 4px 10px 4px 10px ;
24+
position: absolute ;
25+
top: 0px ;
26+
}
27+
}
28+
29+
&.ng-invalid-required {
30+
&:before {
31+
content: "Don't leave me hanging!" ;
32+
}
33+
}
34+
} // END: form.
35+
36+
37+
div.m-dropdown {
38+
position: relative ;
39+
text-decoration: none ;
40+
user-select: none ;
41+
-moz-user-select: none ;
42+
-webkit-user-select: none ;
43+
44+
div.dropdown-root {
45+
background-color: #FFFFFF ;
46+
border: 1px solid #CCCCCC ;
47+
border-radius: 3px 3px 3px 3px ;
48+
cursor: pointer ;
49+
}
50+
51+
ul.dropdown-options {
52+
background-color: #FFFFFF ;
53+
border: 1px solid #CCCCCC ;
54+
border-radius: 0px 0px 3px 3px ;
55+
display: none ;
56+
left: 0px ;
57+
list-style-type: none ;
58+
margin: 0px 0px 0px 0px ;
59+
padding: 0px 0px 0px 0px ;
60+
position: absolute ;
61+
right: 0px ;
62+
top: 100% ;
63+
z-index: 999999 ;
64+
}
65+
66+
li.dropdown-option {
67+
border-bottom: 1px solid #CCCCCC ;
68+
cursor: pointer ;
69+
margin: 0px 0px 0px 0px ;
70+
padding: 0px 0px 0px 0px ;
71+
position: relative ;
72+
73+
&.dropdown-selection {}
74+
75+
&:last-child {
76+
border-bottom-width: 0px ;
77+
}
78+
}
79+
80+
div.dropdown-label,
81+
li.dropdown-label {
82+
padding: 9px 10px 7px 10px ;
83+
position: relative ;
84+
}
85+
86+
// div.m-dropdown -- variations.
87+
88+
&.dropdown-open {
89+
div.dropdown-root {
90+
border-bottom-width: 0px ;
91+
border-radius: 3px 3px 0px 0px ;
92+
}
93+
94+
ul.dropdown-options {
95+
display: block ;
96+
}
97+
}
98+
99+
&.dropdown-caret {
100+
div.dropdown-root {
101+
padding-right: 30px ;
102+
103+
&:after {
104+
border-left: 5px solid transparent ;
105+
border-right: 5px solid transparent ;
106+
border-top: 5px solid #AAAAAA ;
107+
content: "" ;
108+
height: 0px ;
109+
margin-top: -2px ;
110+
position: absolute ;
111+
right: 10px ;
112+
top: 50% ;
113+
width: 0px ;
114+
}
115+
}
116+
}
117+
} // END: div.m-dropdown.
118+
119+
120+
// Demo-specific variations.
121+
div.m-dropdown {
122+
margin: 20px 0px 20px 0px ;
123+
124+
div.dropdown-root {
125+
div.dropdown-label {
126+
&.dropdown-placeholder {
127+
color: #999999 ;
128+
font-style: italic ;
129+
}
130+
}
131+
}
132+
133+
ul.dropdown-options {
134+
box-shadow: 1px 1px 0px #DADADA ;
135+
}
136+
137+
li.dropdown-option {
138+
&.dropdown-label:hover {
139+
background-color: #FAFAFA ;
140+
}
141+
142+
&.dropdown-selection {
143+
background-color: #FFFFCC ;
144+
font-weight: bold ;
145+
padding-left: 27px ;
146+
147+
&:before {
148+
content: "\00BB" ;
149+
left: 10px ;
150+
line-height: 32px ;
151+
position: absolute ;
152+
top: 0px ;
153+
}
154+
}
155+
156+
&.group.all,
157+
&.group.none {
158+
border-left: 4px solid #CCCCCC ;
159+
color: #333333 ;
160+
}
161+
}
162+
163+
&.ng-invalid-required {
164+
div.dropdown-root {
165+
div.dropdown-label {
166+
background-color: #FFEEEE ;
167+
color: #CC0000 ;
168+
}
169+
}
170+
}
171+
}

0 commit comments

Comments
 (0)