Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Commit beb0b15

Browse files
bobischJefiozie
bobisch
authored and
Jefiozie
committed
docs(*): Fix multiple problems with examples
Make demos actually work in many cases. Mostly add missing controller references and incorrect model names. - demo-append-to-body.html - expand width of grid - demo-basic.html - expand width of grid - demo-group-filter.html - add missing controller - demo-multiple-selection.html - add many missing controller refs - demo-object-as-source.html - fix search filters, add search highlights - demo-select2-with-bootstrap.html - fix incorrect model names - demo-selectize-with-bootstraph.html - fix incorrect model name - demo-tagging.html - fix incorrect model name - Removed search highlighting from email and age fields - Change the bootstrap group-by examples to group by country instead of age - .gitignore - addition of "*~" to ignore vim backup files - removed some trailing spaces - removed BOM from beginnings of some files - added a line ending to last lines if necessary - add "(NOT WORKING)" to the two "Tagging in single object mode" examples.
1 parent 7830290 commit beb0b15

11 files changed

+42
-36
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@
44
/.idea
55
/.tmp
66
.DS_Store
7+
*~

‎docs/assets/demo.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ app.filter('propsFilter', function() {
1414

1515
if (angular.isArray(items)) {
1616
var keys = Object.keys(props);
17-
17+
1818
items.forEach(function(item) {
1919
var itemMatches = false;
2020

‎docs/examples/demo-append-to-body.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
 <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
1+
<button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
22
<button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>
33
<button class="btn btn-default btn-xs" ng-click="ctrl.appendToBodyDemo.startToggleTimer()"
44
ng-disabled="ctrl.appendToBodyDemo.remainingTime">
@@ -13,7 +13,7 @@ <h3>Bootstrap theme</h3>
1313
theme="bootstrap"
1414
ng-disabled="ctrl.disabled"
1515
reset-search-input="false"
16-
style="width: 300px;"
16+
style="width: 600px;"
1717
title="Choose an address"
1818
append-to-body="true">
1919
<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>

‎docs/examples/demo-basic.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
 <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
1+
<button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
22
<button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>
33
<button class="btn btn-default btn-xs" ng-click="ctrl.clear()">Clear ng-model</button>
44

@@ -8,7 +8,7 @@ <h3>Bootstrap theme <small>(remote data source)</small></h3>
88
theme="bootstrap"
99
ng-disabled="ctrl.disabled"
1010
reset-search-input="false"
11-
style="width: 300px;"
11+
style="width: 600px;"
1212
title="Choose an address">
1313
<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
1414
<ui-select-choices repeat="address in ctrl.addresses track by $index"

‎docs/examples/demo-group-filter.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
 <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
1+
<button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
22
<button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>
33
<button class="btn btn-default btn-xs" ng-click="ctrl.clear()">Clear ng-model</button>
44

@@ -16,10 +16,10 @@ <h3> Filter groups by array <small><code>group-filter="['Z','B','C']"</code></sm
1616
</ui-select-choices>
1717
</ui-select>
1818

19-
<h3>Filter groups using a function <small><code>group-filter="reverseOrderFilterFn"</code></small></h3>
19+
<h3>Filter groups using a function <small><code>group-filter="ctrl.reverseOrderFilterFn"</code></small></h3>
2020
<ui-select ng-model="ctrl.country.selected" theme="select2" ng-disabled="ctrl.disabled" style="width: 300px;" title="Choose a country">
2121
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
22-
<ui-select-choices group-by="ctrl.firstLetterGroupFn" group-filter="reverseOrderFilterFn" repeat="country in ctrl.countries | filter: $select.search">
22+
<ui-select-choices group-by="ctrl.firstLetterGroupFn" group-filter="ctrl.reverseOrderFilterFn" repeat="country in ctrl.countries | filter: $select.search">
2323
<span ng-bind-html="country.name | highlight: $select.search"></span>
2424
<small ng-bind-html="country.code | highlight: $select.search"></small>
2525
</ui-select-choices>

‎docs/examples/demo-multiple-selection.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
 <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
1+
<button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
22
<button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>
33
<button class="btn btn-default btn-xs" ng-click="ctrl.clear()">Clear ng-model</button>
44

@@ -11,7 +11,7 @@ <h3>Array of strings</h3>
1111
{{color}}
1212
</ui-select-choices>
1313
</ui-select>
14-
<p>Selected: {{multipleDemo.colors}}</p>
14+
<p>Selected: {{ctrl.multipleDemo.colors}}</p>
1515
<hr>
1616
<h3>Array of objects (sorting enabled)</h3>
1717
<ui-select multiple ng-model="ctrl.multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="ctrl.disabled" sortable="true" close-on-select="false" style="width: 800px;">
@@ -24,11 +24,11 @@ <h3>Array of objects (sorting enabled)</h3>
2424
</small>
2525
</ui-select-choices>
2626
</ui-select>
27-
<p>Selected: {{multipleDemo.selectedPeople}}</p>
27+
<p>Selected: {{ctrl.multipleDemo.selectedPeople}}</p>
2828

2929
<hr>
3030
<h3>Deselect callback with single property binding</h3>
31-
<ui-select multiple ng-model="ctrl.multipleDemo.deSelectedPeople" on-remove="removed($item, $model)" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
31+
<ui-select multiple ng-model="ctrl.multipleDemo.deSelectedPeople" on-remove="ctrl.removed($item, $model)" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
3232
<ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
3333
<ui-select-choices repeat="person.email as person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
3434
<div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -56,21 +56,21 @@ <h3>Array of objects with single property binding</h3>
5656
</small>
5757
</ui-select-choices>
5858
</ui-select>
59-
<p>Selected: {{multipleDemo.selectedPeopleSimple}}</p>
59+
<p>Selected: {{ctrl.multipleDemo.selectedPeopleSimple}}</p>
6060

6161
<hr>
6262
<h3>Array of objects (with groupBy)</h3>
6363
<ui-select multiple ng-model="ctrl.multipleDemo.selectedPeopleWithGroupBy" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
6464
<ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
65-
<ui-select-choices group-by="someGroupFn" repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
65+
<ui-select-choices group-by="ctrl.someGroupFn" repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
6666
<div ng-bind-html="person.name | highlight: $select.search"></div>
6767
<small>
6868
email: {{person.email}}
6969
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
7070
</small>
7171
</ui-select-choices>
7272
</ui-select>
73-
<p>Selected: {{multipleDemo.selectedPeopleWithGroupBy}}</p>
73+
<p>Selected: {{ctrl.multipleDemo.selectedPeopleWithGroupBy}}</p>
7474

7575
<hr>
7676
<h3>Disabling instead of removing selected items</h3>
@@ -84,6 +84,6 @@ <h3>Disabling instead of removing selected items</h3>
8484
</small>
8585
</ui-select-choices>
8686
</ui-select>
87-
<p>Selected: {{multipleDemo.removeSelectIsFalse}}</p>
87+
<p>Selected: {{ctrl.multipleDemo.removeSelectIsFalse}}</p>
8888

8989
<div style="height:500px"></div>

‎docs/examples/demo-object-as-source.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-

1+
22
<button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
33
<button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>
44
<button class="btn btn-default btn-xs" ng-click="ctrl.clear()">Clear ng-model</button>
@@ -11,11 +11,11 @@ <h3>Using value for binding</h3>
1111
<p>Selected: <code>{{ctrl.person.selectedValue}}</code></p>
1212
<ui-select ng-model="ctrl.person.selectedValue" theme="select2" ng-disabled="ctrl.disabled" style="min-width: 300px;" title="Choose a person">
1313
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.value.name}}</ui-select-match>
14-
<ui-select-choices repeat="person.value as (key, person) in ctrl.peopleObj | filter: { value : { name: $select.search }}">
14+
<ui-select-choices repeat="person.value as (key, person) in ctrl.peopleObj | filter: { value: { name: $select.search }}">
1515
<div ng-bind-html="person.value.name | highlight: $select.search"></div>
1616
<small>
1717
email: {{person.value.email}}
18-
age: <span ng-bind-html="''+person.value.age | highlight: $select.search"></span>
18+
age: {{person.value.age}}
1919
</small>
2020
</ui-select-choices>
2121
</ui-select>
@@ -24,11 +24,11 @@ <h3>Using single property for binding</h3>
2424
<p>Selected: <code>{{ctrl.person.selectedSingle}}</code></p>
2525
<ui-select ng-model="ctrl.person.selectedSingle" theme="select2" ng-disabled="ctrl.disabled" style="min-width: 300px;" title="Choose a person">
2626
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.value.name}}</ui-select-match>
27-
<ui-select-choices repeat="person.value.name as (key, person) in ctrl.peopleObj | filter: { value : { name: $select.search }}">
27+
<ui-select-choices repeat="person.value.name as (key, person) in ctrl.peopleObj | filter: { value: { name: $select.search }}">
2828
<div ng-bind-html="person.value.name | highlight: $select.search"></div>
2929
<small>
3030
email: {{person.value.email}}
31-
age: <span ng-bind-html="''+person.value.age | highlight: $select.search"></span>
31+
age: {{person.value.age}}
3232
</small>
3333
</ui-select-choices>
3434
</ui-select>
@@ -37,11 +37,11 @@ <h3>Using key for binding</h3>
3737
<p>Selected: <code>{{ctrl.person.selectedSingleKey}}</code></p>
3838
<ui-select ng-model="ctrl.person.selectedSingleKey" theme="select2" ng-disabled="ctrl.disabled" style="min-width: 300px;" title="Choose a person">
3939
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.value.name}}</ui-select-match>
40-
<ui-select-choices repeat="person.key as (key, person) in ctrl.peopleObj | filter: { value : { name: $select.search }}">
40+
<ui-select-choices repeat="person.key as (key, person) in ctrl.peopleObj | filter: { value: { name: $select.search }}">
4141
<div ng-bind-html="person.value.name | highlight: $select.search"></div>
4242
<small>
4343
email: {{person.value.email}}
44-
age: <span ng-bind-html="''+person.value.age | highlight: $select.search"></span>
44+
age: {{person.value.age}}
4545
</small>
4646
</ui-select-choices>
4747
</ui-select>

‎docs/examples/demo-select2-with-bootstrap.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
 <p>Selected: {{ctrl.person.selected.name}}</p>
1+
<p>Selected: {{ctrl.person.selected.name}}</p>
22

33
<form class="form-horizontal">
44
<fieldset>
@@ -23,7 +23,7 @@
2323
<label class="col-sm-3 control-label">Multiple</label>
2424
<div class="col-sm-6">
2525

26-
<ui-select multiple sortable="true" ng-model="ctrl.person.selected" theme="select2" class="form-control" title="Choose a person">
26+
<ui-select multiple sortable="true" ng-model="ctrl.multipleDemo.selectedPeople" theme="select2" class="form-control" title="Choose a person">
2727
<ui-select-match placeholder="Select or search a person in the list...">{{$item.name}}</ui-select-match>
2828
<ui-select-choices repeat="item in ctrl.people | filter: $select.search">
2929
<div ng-bind-html="item.name | highlight: $select.search"></div>
@@ -40,7 +40,7 @@
4040

4141
<ui-select ng-model="ctrl.person.selected" theme="select2" class="form-control" title="Choose a person">
4242
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
43-
<ui-select-choices group-by="'group'" repeat="item in ctrl.people | filter: $select.search">
43+
<ui-select-choices group-by="'country'" repeat="item in ctrl.people | filter: $select.search">
4444
<span ng-bind-html="item.name | highlight: $select.search"></span>
4545
<small ng-bind-html="item.email | highlight: $select.search"></small>
4646
</ui-select-choices>
@@ -88,4 +88,4 @@
8888
</div>
8989

9090
</fieldset>
91-
</form>
91+
</form>

‎docs/examples/demo-selectize-with-bootstrap.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
 <style>
1+
<style>
22
body {
33
padding: 15px;
44
}
@@ -45,7 +45,7 @@
4545

4646
<ui-select ng-model="ctrl.person.selected" theme="selectize" title="Choose a person">
4747
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
48-
<ui-select-choices group-by="'group'" repeat="item in ctrl.people | filter: $select.search">
48+
<ui-select-choices group-by="'country'" repeat="item in ctrl.people | filter: $select.search">
4949
<span ng-bind-html="item.name | highlight: $select.search"></span>
5050
<small ng-bind-html="item.email | highlight: $select.search"></small>
5151
</ui-select-choices>

‎docs/examples/demo-tagging.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-

1+
22
<button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
33
<button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>
44
<button class="btn btn-default btn-xs" ng-click="ctrl.clear()">Clear ng-model</button>
@@ -45,7 +45,7 @@ <h3>Object Tags <small>(with grouping)</small></h3>
4545
<hr>
4646

4747
<h3>Object Tags with Tokenization <small>("<code>&nbsp;</code>", <code>/</code>, <code>,</code>)</small></h3>
48-
<strong>Note that the Space character can't be used literally, use the keyword SPACE</strong>
48+
<strong>Note that the Space character can't be used literally, use the keyword SPACE - <code>tagging-tokens="SPACE|,|/"</code></strong>
4949
<ui-select multiple tagging="ctrl.tagTransform" tagging-tokens="SPACE|,|/" ng-model="ctrl.multipleDemo.selectedPeople2" theme="bootstrap" ng-disabled="ctrl.disabled" style="width: 800px;" title="Choose a person">
5050
<ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
5151
<ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
@@ -58,9 +58,9 @@ <h3>Object Tags with Tokenization <small>("<code>&nbsp;</code>", <code>/</code>,
5858
</ui-select-choices>
5959
</ui-select>
6060
<p>Selected: </p>
61-
<pre>selectedPeople = {{ctrl.multipleDemo.selectedPeople | json}}</pre>
61+
<pre>selectedPeople2 = {{ctrl.multipleDemo.selectedPeople2 | json}}</pre>
6262

63-
<h3>Tagging in Single Select mode</h3>
63+
<h3>Tagging in Single Select mode</h3>(NOT WORKING)
6464
<ui-select tagging="ctrl.tagTransform" ng-model="ctrl.person.selected" theme="bootstrap" ng-disabled="ctrl.disabled" style="width: 800px;" title="Choose a person">
6565
<ui-select-match placeholder="Select person...">{{$select.selected.name}} &lt;{{$select.selected.email}}&gt;</ui-select-match>
6666
<ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
@@ -75,7 +75,7 @@ <h3>Tagging in Single Select mode</h3>
7575
<p>Selected:</p>
7676
<pre>ctrl.person.selected = {{ctrl.person.selected | json }}</pre>
7777

78-
<h3>Tagging in Single select mode, with simple strings</h3>
78+
<h3>Tagging in Single select mode, with simple strings</h3>(NOT WORKING)
7979
<ui-select tagging tagging-label="('new')" ng-model="ctrl.singleDemo.color" theme="bootstrap" style="width: 800px;" title="Choose a color">
8080
<ui-select-match placeholder="Select color...">{{$select.selected}}</ui-select-match>
8181
<ui-select-choices repeat="color in ctrl.availableColors | filter: $select.search">

‎gulpfile.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ gulp.task('docs:assets', function () {
170170
});
171171

172172
gulp.task('docs:examples', function () {
173+
// Need a way to reset filename list: $.filenames('exampleFiles',{overrideMode:true});
173174
return gulp.src(['docs/examples/*.html'])
174175
.pipe($.header(fs.readFileSync('docs/partials/_header.html')))
175176
.pipe($.footer(fs.readFileSync('docs/partials/_footer.html')))
@@ -185,11 +186,15 @@ gulp.task('docs:index', function () {
185186
return '<h4><a href="./' + filename + '">' + cleaned + '</a> <plnkr-opener example-path="' + filename + '"></plnkr-opener></h4>';
186187
});
187188

188-
return gulp.src('docs/index.html')
189-
.pipe($.replace('<!-- INSERT EXAMPLES HERE -->', exampleFiles.join("\n")))
189+
return gulp.src('docs/index.html')
190+
.pipe($.replace('<!-- INSERT EXAMPLES HERE -->', exampleFiles.join("\n")))
190191
.pipe(gulp.dest('./docs-built/'));
191192
});
192193

194+
gulp.task('docs:watch', ['docs'], function() {
195+
gulp.watch(['docs/**/*.{js,html}'], ['docs']);
196+
});
197+
193198
var handleError = function (err) {
194199
console.log(err.toString());
195200
this.emit('end');

0 commit comments

Comments
 (0)