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

Demo #142

Merged
merged 2 commits into from
Jan 28, 2014
Merged

Demo #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
69ad9f5
Add demo suite
kbanman Jan 21, 2014
74e2305
Correct example config
kbanman Jan 21, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules
bower_components
demo/bower_components
114 changes: 114 additions & 0 deletions demo/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@

var app = angular.module('angular-ui-select2-demo', ['ui.select2']);

app.controller('MainCtrl', function ($scope, $element) {

var states = [
{ text: 'Alaskan/Hawaiian Time Zone', children: [
{ id: 'AK', text: 'Alaska' },
{ id: 'HI', text: 'Hawaii' }
]},
{ text: 'Pacific Time Zone', children: [
{ id: 'CA', text: 'California' },
{ id: 'NV', text: 'Nevada' },
{ id: 'OR', text: 'Oregon' },
{ id: 'WA', text: 'Washington' }
]},
{ text: 'Mountain Time Zone', children: [
{ id: 'AZ', text: 'Arizona' },
{ id: 'CO', text: 'Colorado' },
{ id: 'ID', text: 'Idaho' },
{ id: 'MT', text: 'Montana' },
{ id: 'NE', text: 'Nebraska' },
{ id: 'NM', text: 'New Mexico' },
{ id: 'ND', text: 'North Dakota' },
{ id: 'UT', text: 'Utah' },
{ id: 'WY', text: 'Wyoming' }
]},
{ text: 'Central Time Zone', children: [
{ id: 'AL', text: 'Alabama' },
{ id: 'AR', text: 'Arkansas' },
{ id: 'IL', text: 'Illinois' },
{ id: 'IA', text: 'Iowa' },
{ id: 'KS', text: 'Kansas' },
{ id: 'KY', text: 'Kentucky' },
{ id: 'LA', text: 'Louisiana' },
{ id: 'MN', text: 'Minnesota' },
{ id: 'MS', text: 'Mississippi' },
{ id: 'MO', text: 'Missouri' },
{ id: 'OK', text: 'Oklahoma' },
{ id: 'SD', text: 'South Dakota' },
{ id: 'TX', text: 'Texas' },
{ id: 'TN', text: 'Tennessee' },
{ id: 'WI', text: 'Wisconsin' }
]},
{ text: 'Eastern Time Zone', children: [
{ id: 'CT', text: 'Connecticut' },
{ id: 'DE', text: 'Delaware' },
{ id: 'FL', text: 'Florida' },
{ id: 'GA', text: 'Georgia' },
{ id: 'IN', text: 'Indiana' },
{ id: 'ME', text: 'Maine' },
{ id: 'MD', text: 'Maryland' },
{ id: 'MA', text: 'Massachusetts' },
{ id: 'MI', text: 'Michigan' },
{ id: 'NH', text: 'New Hampshire' },
{ id: 'NJ', text: 'New Jersey' },
{ id: 'NY', text: 'New York' },
{ id: 'NC', text: 'North Carolina' },
{ id: 'OH', text: 'Ohio' },
{ id: 'PA', text: 'Pennsylvania' },
{ id: 'RI', text: 'Rhode Island' },
{ id: 'SC', text: 'South Carolina' },
{ id: 'VT', text: 'Vermont' },
{ id: 'VA', text: 'Virginia' },
{ id: 'WV', text: 'West Virginia' }
]}
];

function findState(id) {
for (var i=0; i<states.length; i++) {
for (var j=0; j<states[i].children.length; j++) {
if (states[i].children[j].id == id) {
return states[i].children[j];
}
}
}
}

$scope.multi2Value = ['CO', 'WA'];

$scope.multi = {
multiple: true,
query: function (query) {
query.callback({ results: states });
},
initSelection: function(element, callback) {
var val = $(element).select2('val'),
results = [];
for (var i=0; i<val.length; i++) {
results.push(findState(val[i]));
}
callback(results);
}
};

$scope.placeholders = {
placeholder: "Select a State"
};

$scope.array = {
data: [{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
};

$scope.arrayAsync = {
query: function (query) {
query.callback({ results: states });
},
initSelection: function(element, callback) {
var val = $(element).select2('val');
return callback(findState(val));
}
};

});
11 changes: 11 additions & 0 deletions demo/bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"name": "angular-ui-select2-demo",
"main": "./index.html",
"dependencies": {
"angular": ">=1.2.0",
"select2": "~3.4",
"jquery": ">=1.6.4",
"bootstrap": "~3.0.3",
"angular-ui-select2": "~0.0.5"
}
}
225 changes: 225 additions & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<!DOCTYPE html>
<html ng-app="angular-ui-select2-demo">
<head>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/select2/select2.css">
<style>
.container {
padding-bottom: 4em;
}

h2 {
border-bottom: 1px solid #ddd;
margin-top: 2em;
}
h3 {
font-size: 16px;
font-weight: normal;
margin-top: 0.2em;
}
.select2-container {
}
label {
font-size: 16px;
font-weight: normal;
display: block;
color: #333;
}
.example.row {
margin-top: 1em;
}
</style>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/select2/select2.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-select2/src/select2.js"></script>
<script src="app.js"></script>
<script>
$(function() {
var opts=$('#source').html(), opts2='<option></option>'+opts;
$('select.populate').each(function() { var e=$(this); e.html(e.hasClass('placeholder')?opts2:opts); });
});
</script>
</head>
<body>
<div class="container" ng-controller="MainCtrl">

<article class="row" id="basics">
<h2>The Basics</h2>
<div class="example row">
<div class="col-md-4 left">
<label>&lt;select&gt;</label>
<select style="width:300px" ui-select2 ng-model="basicsValue" id="source">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</div>
<div class="col-md-8 right">
<h3>Value</h3>
<pre>{{ basicsValue }}</pre>
</div>
</div>
</article>

<article class="row" id="multi">
<h2>Multi-Value</h2>
<div class="example row">
<div class="col-md-4 left">
<label>&lt;select multiple&gt;</label>
<select style="width:300px" ui-select2 multiple ng-model="multiValue" class="populate"></select>
</div>
<div class="col-md-8 right">
<h3>Value</h3>
<pre>{{ multiValue }}</pre>
</div>
</div>
<div class="example row">
<div class="col-md-4 left">
<label>Pre-defined value</label>
<input type="text" style="width:300px" ui-select2="multi" ng-model="multi2Value"/>
</div>
<div class="col-md-8 right">
<h3>Config</h3>
<pre><code>{
multiple: true,
query: function (query) {
query.callback({ results: states });
},
initSelection: function(element, callback) {
var val = $(element).select2('val'),
results = [];
for (var i=0; i&lt;val.length; i++) {
results.push(findState(val[i]));
}
callback(results);
}
}</code></pre>
<h3>Value</h3>
<pre>{{ multi2Value }}</pre>
</div>
</div>
</article>

<article class="row" id="placeholders">
<h2>Placeholders</h2>
<div class="example row">
<div class="col-md-4 left">
<label>Using data-attribute</label>
<select style="width:300px" ui-select2 ng-model="placeholdersValue" class="populate placeholder" data-placeholder="Select a State"></select>
</div>
<div class="col-md-8 right">
<h3>Value</h3>
<pre>{{ placeholdersValue }}</pre>
</div>
</div>
<div class="example row">
<div class="col-md-4 left">
<label>Multiple, using config</label>
<select style="width:300px" ui-select2="placeholders" multiple ng-model="placeholdersMultiValue" class="populate"></select>
</div>
<div class="col-md-8 right">
<h3>Config</h3>
<pre><code>{{ placeholders }}</code></pre>
<h3>Value</h3>
<pre>{{ placeholdersMultiValue }}</pre>
</div>
</div>
</article>

<article class="row" id="array">
<h2>Array Data</h2>
<div class="example row">
<div class="col-md-4 left">
<label>Simple</label>
<input type="text" style="width:300px" ui-select2="array" ng-model="arrayValue"/>
</div>
<div class="col-md-8 right">
<h3>Config</h3>
<pre><code>{{ array }}</code></pre>
<h3>Value</h3>
<pre>{{ arrayValue }}</pre>
</div>
</div>
<div class="example row">
<div class="col-md-4 left">
<label>Asynchronous</label>
<input type="text" style="width:300px" ui-select2="arrayAsync" ng-model="arrayAsyncValue"/>
</div>
<div class="col-md-8 right">
<h3>Config</h3>
<pre><code>{
query: function (query) {
query.callback({ results: states });
},
initSelection: function(element, callback) {
var val = $(element).select2('val');
return callback(findState(val));
}
}</code></pre>
<h3>Value</h3>
<pre>{{ arrayAsyncValue }}</pre>
</div>
</div>
</article>

</div>
</body>
</html>