Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Commit 69ad9f5

Browse files
kbanmankbanman
committed
Add demo suite
1 parent 42712d2 commit 69ad9f5

File tree

4 files changed

+359
-0
lines changed

4 files changed

+359
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules
22
bower_components
3+
demo/bower_components

‎demo/app.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
2+
var app = angular.module('angular-ui-select2-demo', ['ui.select2']);
3+
4+
app.controller('MainCtrl', function ($scope, $element) {
5+
6+
var states = [
7+
{ text: 'Alaskan/Hawaiian Time Zone', children: [
8+
{ id: 'AK', text: 'Alaska' },
9+
{ id: 'HI', text: 'Hawaii' }
10+
]},
11+
{ text: 'Pacific Time Zone', children: [
12+
{ id: 'CA', text: 'California' },
13+
{ id: 'NV', text: 'Nevada' },
14+
{ id: 'OR', text: 'Oregon' },
15+
{ id: 'WA', text: 'Washington' }
16+
]},
17+
{ text: 'Mountain Time Zone', children: [
18+
{ id: 'AZ', text: 'Arizona' },
19+
{ id: 'CO', text: 'Colorado' },
20+
{ id: 'ID', text: 'Idaho' },
21+
{ id: 'MT', text: 'Montana' },
22+
{ id: 'NE', text: 'Nebraska' },
23+
{ id: 'NM', text: 'New Mexico' },
24+
{ id: 'ND', text: 'North Dakota' },
25+
{ id: 'UT', text: 'Utah' },
26+
{ id: 'WY', text: 'Wyoming' }
27+
]},
28+
{ text: 'Central Time Zone', children: [
29+
{ id: 'AL', text: 'Alabama' },
30+
{ id: 'AR', text: 'Arkansas' },
31+
{ id: 'IL', text: 'Illinois' },
32+
{ id: 'IA', text: 'Iowa' },
33+
{ id: 'KS', text: 'Kansas' },
34+
{ id: 'KY', text: 'Kentucky' },
35+
{ id: 'LA', text: 'Louisiana' },
36+
{ id: 'MN', text: 'Minnesota' },
37+
{ id: 'MS', text: 'Mississippi' },
38+
{ id: 'MO', text: 'Missouri' },
39+
{ id: 'OK', text: 'Oklahoma' },
40+
{ id: 'SD', text: 'South Dakota' },
41+
{ id: 'TX', text: 'Texas' },
42+
{ id: 'TN', text: 'Tennessee' },
43+
{ id: 'WI', text: 'Wisconsin' }
44+
]},
45+
{ text: 'Eastern Time Zone', children: [
46+
{ id: 'CT', text: 'Connecticut' },
47+
{ id: 'DE', text: 'Delaware' },
48+
{ id: 'FL', text: 'Florida' },
49+
{ id: 'GA', text: 'Georgia' },
50+
{ id: 'IN', text: 'Indiana' },
51+
{ id: 'ME', text: 'Maine' },
52+
{ id: 'MD', text: 'Maryland' },
53+
{ id: 'MA', text: 'Massachusetts' },
54+
{ id: 'MI', text: 'Michigan' },
55+
{ id: 'NH', text: 'New Hampshire' },
56+
{ id: 'NJ', text: 'New Jersey' },
57+
{ id: 'NY', text: 'New York' },
58+
{ id: 'NC', text: 'North Carolina' },
59+
{ id: 'OH', text: 'Ohio' },
60+
{ id: 'PA', text: 'Pennsylvania' },
61+
{ id: 'RI', text: 'Rhode Island' },
62+
{ id: 'SC', text: 'South Carolina' },
63+
{ id: 'VT', text: 'Vermont' },
64+
{ id: 'VA', text: 'Virginia' },
65+
{ id: 'WV', text: 'West Virginia' }
66+
]}
67+
];
68+
69+
function findState(id) {
70+
for (var i=0; i<states.length; i++) {
71+
for (var j=0; j<states[i].children.length; j++) {
72+
if (states[i].children[j].id == id) {
73+
return states[i].children[j];
74+
}
75+
}
76+
}
77+
}
78+
79+
$scope.multi2Value = ['CO', 'WA'];
80+
81+
$scope.multi = {
82+
multiple: true,
83+
query: function (query) {
84+
query.callback({ results: states });
85+
},
86+
initSelection: function(element, callback) {
87+
var val = $(element).select2('val'),
88+
results = [];
89+
for (var i=0; i<val.length; i++) {
90+
results.push(findState(val[i]));
91+
}
92+
callback(results);
93+
}
94+
};
95+
96+
$scope.placeholders = {
97+
placeholder: "Select a State"
98+
};
99+
100+
$scope.array = {
101+
data: [{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
102+
};
103+
104+
$scope.arrayAsync = {
105+
query: function (query) {
106+
query.callback({ results: states });
107+
},
108+
initSelection: function(element, callback) {
109+
var val = $(element).select2('val');
110+
return callback(findState(val));
111+
}
112+
};
113+
114+
});

‎demo/bower.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "angular-ui-select2-demo",
3+
"main": "./index.html",
4+
"dependencies": {
5+
"angular": ">=1.2.0",
6+
"select2": "~3.4",
7+
"jquery": ">=1.6.4",
8+
"bootstrap": "~3.0.3",
9+
"angular-ui-select2": "~0.0.5"
10+
}
11+
}

‎demo/index.html

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
<!DOCTYPE html>
2+
<html ng-app="angular-ui-select2-demo">
3+
<head>
4+
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
5+
<link rel="stylesheet" href="bower_components/select2/select2.css">
6+
<style>
7+
.container {
8+
padding-bottom: 4em;
9+
}
10+
11+
h2 {
12+
border-bottom: 1px solid #ddd;
13+
margin-top: 2em;
14+
}
15+
h3 {
16+
font-size: 16px;
17+
font-weight: normal;
18+
margin-top: 0.2em;
19+
}
20+
.select2-container {
21+
}
22+
label {
23+
font-size: 16px;
24+
font-weight: normal;
25+
display: block;
26+
color: #333;
27+
}
28+
.example.row {
29+
margin-top: 1em;
30+
}
31+
</style>
32+
<script src="bower_components/jquery/jquery.js"></script>
33+
<script src="bower_components/select2/select2.js"></script>
34+
<script src="bower_components/angular/angular.js"></script>
35+
<script src="bower_components/angular-ui-select2/src/select2.js"></script>
36+
<script src="app.js"></script>
37+
<script>
38+
$(function() {
39+
var opts=$('#source').html(), opts2='<option></option>'+opts;
40+
$('select.populate').each(function() { var e=$(this); e.html(e.hasClass('placeholder')?opts2:opts); });
41+
});
42+
</script>
43+
</head>
44+
<body>
45+
<div class="container" ng-controller="MainCtrl">
46+
47+
<article class="row" id="basics">
48+
<h2>The Basics</h2>
49+
<div class="example row">
50+
<div class="col-md-4 left">
51+
<label>&lt;select&gt;</label>
52+
<select style="width:300px" ui-select2 ng-model="basicsValue" id="source">
53+
<optgroup label="Alaskan/Hawaiian Time Zone">
54+
<option value="AK">Alaska</option>
55+
<option value="HI">Hawaii</option>
56+
</optgroup>
57+
<optgroup label="Pacific Time Zone">
58+
<option value="CA">California</option>
59+
<option value="NV">Nevada</option>
60+
<option value="OR">Oregon</option>
61+
<option value="WA">Washington</option>
62+
</optgroup>
63+
<optgroup label="Mountain Time Zone">
64+
<option value="AZ">Arizona</option>
65+
<option value="CO">Colorado</option>
66+
<option value="ID">Idaho</option>
67+
<option value="MT">Montana</option>
68+
<option value="NE">Nebraska</option>
69+
<option value="NM">New Mexico</option>
70+
<option value="ND">North Dakota</option>
71+
<option value="UT">Utah</option>
72+
<option value="WY">Wyoming</option>
73+
</optgroup>
74+
<optgroup label="Central Time Zone">
75+
<option value="AL">Alabama</option>
76+
<option value="AR">Arkansas</option>
77+
<option value="IL">Illinois</option>
78+
<option value="IA">Iowa</option>
79+
<option value="KS">Kansas</option>
80+
<option value="KY">Kentucky</option>
81+
<option value="LA">Louisiana</option>
82+
<option value="MN">Minnesota</option>
83+
<option value="MS">Mississippi</option>
84+
<option value="MO">Missouri</option>
85+
<option value="OK">Oklahoma</option>
86+
<option value="SD">South Dakota</option>
87+
<option value="TX">Texas</option>
88+
<option value="TN">Tennessee</option>
89+
<option value="WI">Wisconsin</option>
90+
</optgroup>
91+
<optgroup label="Eastern Time Zone">
92+
<option value="CT">Connecticut</option>
93+
<option value="DE">Delaware</option>
94+
<option value="FL">Florida</option>
95+
<option value="GA">Georgia</option>
96+
<option value="IN">Indiana</option>
97+
<option value="ME">Maine</option>
98+
<option value="MD">Maryland</option>
99+
<option value="MA">Massachusetts</option>
100+
<option value="MI">Michigan</option>
101+
<option value="NH">New Hampshire</option>
102+
<option value="NJ">New Jersey</option>
103+
<option value="NY">New York</option>
104+
<option value="NC">North Carolina</option>
105+
<option value="OH">Ohio</option>
106+
<option value="PA">Pennsylvania</option>
107+
<option value="RI">Rhode Island</option>
108+
<option value="SC">South Carolina</option>
109+
<option value="VT">Vermont</option>
110+
<option value="VA">Virginia</option>
111+
<option value="WV">West Virginia</option>
112+
</optgroup>
113+
</select>
114+
</div>
115+
<div class="col-md-8 right">
116+
<h3>Value</h3>
117+
<pre>{{ basicsValue }}</pre>
118+
</div>
119+
</div>
120+
</article>
121+
122+
<article class="row" id="multi">
123+
<h2>Multi-Value</h2>
124+
<div class="example row">
125+
<div class="col-md-4 left">
126+
<label>&lt;select multiple&gt;</label>
127+
<select style="width:300px" ui-select2 multiple ng-model="multiValue" class="populate"></select>
128+
</div>
129+
<div class="col-md-8 right">
130+
<h3>Value</h3>
131+
<pre>{{ multiValue }}</pre>
132+
</div>
133+
</div>
134+
<div class="example row">
135+
<div class="col-md-4 left">
136+
<label>Pre-defined value</label>
137+
<input type="text" style="width:300px" ui-select2="multi" ng-model="multi2Value"/>
138+
</div>
139+
<div class="col-md-8 right">
140+
<h3>Config</h3>
141+
<pre><code>{
142+
multiple: true,
143+
query: function (query) {
144+
query.callback({ results: states });
145+
},
146+
initSelection: function(element, callback) {
147+
var val = $(element).val();
148+
for (var i=0; i&lt;states.length; i++) {
149+
for (var j=0; j&lt;states[i].children.length; j++) {
150+
if (states[i].children[j].id == val) {
151+
return callback(states[i].children[j]);
152+
}
153+
}
154+
}
155+
}
156+
}</code></pre>
157+
<h3>Value</h3>
158+
<pre>{{ multi2Value }}</pre>
159+
</div>
160+
</div>
161+
</article>
162+
163+
<article class="row" id="placeholders">
164+
<h2>Placeholders</h2>
165+
<div class="example row">
166+
<div class="col-md-4 left">
167+
<label>Using data-attribute</label>
168+
<select style="width:300px" ui-select2 ng-model="placeholdersValue" class="populate placeholder" data-placeholder="Select a State"></select>
169+
</div>
170+
<div class="col-md-8 right">
171+
<h3>Value</h3>
172+
<pre>{{ placeholdersValue }}</pre>
173+
</div>
174+
</div>
175+
<div class="example row">
176+
<div class="col-md-4 left">
177+
<label>Multiple, using config</label>
178+
<select style="width:300px" ui-select2="placeholders" multiple ng-model="placeholdersMultiValue" class="populate"></select>
179+
</div>
180+
<div class="col-md-8 right">
181+
<h3>Config</h3>
182+
<pre><code>{{ placeholders }}</code></pre>
183+
<h3>Value</h3>
184+
<pre>{{ placeholdersMultiValue }}</pre>
185+
</div>
186+
</div>
187+
</article>
188+
189+
<article class="row" id="array">
190+
<h2>Array Data</h2>
191+
<div class="example row">
192+
<div class="col-md-4 left">
193+
<label>Simple</label>
194+
<input type="text" style="width:300px" ui-select2="array" ng-model="arrayValue"/>
195+
</div>
196+
<div class="col-md-8 right">
197+
<h3>Config</h3>
198+
<pre><code>{{ array }}</code></pre>
199+
<h3>Value</h3>
200+
<pre>{{ arrayValue }}</pre>
201+
</div>
202+
</div>
203+
<div class="example row">
204+
<div class="col-md-4 left">
205+
<label>Asynchronous</label>
206+
<input type="text" style="width:300px" ui-select2="arrayAsync" ng-model="arrayAsyncValue"/>
207+
</div>
208+
<div class="col-md-8 right">
209+
<h3>Config</h3>
210+
<pre><code>{
211+
query: function (query) {
212+
query.callback({ results: states });
213+
},
214+
initSelection: function(element, callback) {
215+
var val = $(element).val();
216+
for (var i=0; i&lt;states.length; i++) {
217+
for (var j=0; j&lt;states[i].children.length; j++) {
218+
if (states[i].children[j].id == val) {
219+
return callback(states[i].children[j]);
220+
}
221+
}
222+
}
223+
}
224+
}</code></pre>
225+
<h3>Value</h3>
226+
<pre>{{ arrayAsyncValue }}</pre>
227+
</div>
228+
</div>
229+
</article>
230+
231+
</div>
232+
</body>
233+
</html>

0 commit comments

Comments
 (0)