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

Commit 502340a

Browse files
felixmoshfelixmosh
committed
feat(Header & Footer): Add header & footer to the dropdown list.
1 parent 3e25a48 commit 502340a

24 files changed

+1216
-890
lines changed

‎dist/select.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -337,7 +337,7 @@ body > .ui-select-bootstrap.open {
337337
line-height: 1;
338338
-webkit-font-smoothing:antialiased;
339339
}
340-
340+
341341
@-webkit-keyframes ui-select-spin {
342342
0% {
343343
-webkit-transform: rotate(0deg);
@@ -366,4 +366,4 @@ body > .ui-select-bootstrap.open {
366366

367367
.ui-select-refreshing.ng-animate {
368368
-webkit-animation: none 0s;
369-
}
369+
}

‎dist/select.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2390,4 +2390,4 @@ $templateCache.put("selectize/match-multiple.tpl.html","<div class=\"ui-select-m
23902390
$templateCache.put("selectize/match.tpl.html","<div ng-hide=\"$select.searchEnabled && ($select.open || $select.isEmpty())\" class=\"ui-select-match\"><span ng-show=\"!$select.searchEnabled && ($select.isEmpty() || $select.open)\" class=\"ui-select-placeholder text-muted\">{{$select.placeholder}}</span> <span ng-hide=\"$select.isEmpty() || $select.open\" ng-transclude=\"\"></span></div>");
23912391
$templateCache.put("selectize/no-choice.tpl.html","<div class=\"ui-select-no-choice selectize-dropdown\" ng-show=\"$select.items.length == 0\"><div class=\"selectize-dropdown-content\"><div data-selectable=\"\" ng-transclude=\"\"></div></div></div>");
23922392
$templateCache.put("selectize/select-multiple.tpl.html","<div class=\"ui-select-container selectize-control multi plugin-remove_button\" ng-class=\"{\'open\': $select.open}\"><div class=\"selectize-input\" ng-class=\"{\'focus\': $select.open, \'disabled\': $select.disabled, \'selectize-focus\' : $select.focus}\" ng-click=\"$select.open && !$select.searchEnabled ? $select.toggle($event) : $select.activate()\"><div class=\"ui-select-match\"></div><input type=\"search\" autocomplete=\"off\" tabindex=\"-1\" class=\"ui-select-search\" ng-class=\"{\'ui-select-search-hidden\':!$select.searchEnabled}\" placeholder=\"{{$selectMultiple.getPlaceholder()}}\" ng-model=\"$select.search\" ng-disabled=\"$select.disabled\" aria-expanded=\"{{$select.open}}\" aria-label=\"{{ $select.baseTitle }}\" ondrop=\"return false;\"></div><div class=\"ui-select-choices\"></div><div class=\"ui-select-no-choice\"></div></div>");
2393-
$templateCache.put("selectize/select.tpl.html","<div class=\"ui-select-container selectize-control single\" ng-class=\"{\'open\': $select.open}\"><div class=\"selectize-input\" ng-class=\"{\'focus\': $select.open, \'disabled\': $select.disabled, \'selectize-focus\' : $select.focus}\" ng-click=\"$select.open && !$select.searchEnabled ? $select.toggle($event) : $select.activate()\"><div class=\"ui-select-match\"></div><input type=\"search\" autocomplete=\"off\" tabindex=\"-1\" class=\"ui-select-search ui-select-toggle\" ng-class=\"{\'ui-select-search-hidden\':!$select.searchEnabled}\" ng-click=\"$select.toggle($event)\" placeholder=\"{{$select.placeholder}}\" ng-model=\"$select.search\" ng-hide=\"!$select.isEmpty() && !$select.open\" ng-disabled=\"$select.disabled\" aria-label=\"{{ $select.baseTitle }}\"></div><div class=\"ui-select-choices\"></div><div class=\"ui-select-no-choice\"></div></div>");}]);
2393+
$templateCache.put("selectize/select.tpl.html","<div class=\"ui-select-container selectize-control single\" ng-class=\"{\'open\': $select.open}\"><div class=\"selectize-input\" ng-class=\"{\'focus\': $select.open, \'disabled\': $select.disabled, \'selectize-focus\' : $select.focus}\" ng-click=\"$select.open && !$select.searchEnabled ? $select.toggle($event) : $select.activate()\"><div class=\"ui-select-match\"></div><input type=\"search\" autocomplete=\"off\" tabindex=\"-1\" class=\"ui-select-search ui-select-toggle\" ng-class=\"{\'ui-select-search-hidden\':!$select.searchEnabled}\" ng-click=\"$select.toggle($event)\" placeholder=\"{{$select.placeholder}}\" ng-model=\"$select.search\" ng-hide=\"!$select.isEmpty() && !$select.open\" ng-disabled=\"$select.disabled\" aria-label=\"{{ $select.baseTitle }}\"></div><div class=\"ui-select-choices\"></div><div class=\"ui-select-no-choice\"></div></div>");}]);

‎dist/select.min.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/select.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/examples/demo-header-and-footer.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<h3>Basic Header and Footer</h3>
2+
<button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
3+
<button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>
4+
<button class="btn btn-default btn-xs" ng-click="ctrl.clear()">Clear ng-model</button>
5+
6+
<h3>Bootstrap theme <small>(remote data source)</small></h3>
7+
<p>Selected: {{ctrl.address.selected.formatted_address}}</p>
8+
<ui-select ng-model="ctrl.address.selected"
9+
theme="bootstrap"
10+
ng-disabled="ctrl.disabled"
11+
reset-search-input="false"
12+
style="width: 300px;"
13+
title="Choose an address">
14+
<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
15+
<ui-select-header>Header text</ui-select-header>
16+
<ui-select-choices repeat="address in ctrl.addresses track by $index"
17+
refresh="ctrl.refreshAddresses($select.search)"
18+
refresh-delay="0">
19+
<div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
20+
</ui-select-choices>
21+
<ui-select-footer>Footer text</ui-select-footer>
22+
</ui-select>
23+
24+
<h3>Select2 theme</h3>
25+
<p>Selected: {{ctrl.person.selected}}</p>
26+
<ui-select ng-model="ctrl.person.selected" theme="select2" ng-disabled="ctrl.disabled" style="min-width: 300px;" title="Choose a person">
27+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
28+
<ui-select-header>Header text</ui-select-header>
29+
<ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
30+
<div ng-bind-html="person.name | highlight: $select.search"></div>
31+
<small>
32+
email: {{person.email}}
33+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
34+
</small>
35+
</ui-select-choices>
36+
<ui-select-footer>Footer text</ui-select-footer>
37+
</ui-select>
38+
39+
<h3>Selectize theme</h3>
40+
<p>Selected: {{ctrl.country.selected}}</p>
41+
<ui-select ng-model="ctrl.country.selected" theme="selectize" ng-disabled="ctrl.disabled" style="width: 300px;" title="Choose a country">
42+
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
43+
<ui-select-header>Header text</ui-select-header>
44+
<ui-select-choices repeat="country in ctrl.countries | filter: $select.search">
45+
<span ng-bind-html="country.name | highlight: $select.search"></span>
46+
<small ng-bind-html="country.code | highlight: $select.search"></small>
47+
</ui-select-choices>
48+
<ui-select-footer>Footer text</ui-select-footer>
49+
</ui-select>

‎src/bootstrap/choices.tpl.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
<ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu"
2-
ng-show="$select.open && $select.items.length > 0">
1+
<ul class="ui-select-choices ui-select-choices-content">
32
<li class="ui-select-choices-group" id="ui-select-choices-{{ $select.generatedId }}" >
43
<div class="divider" ng-show="$select.isGrouped && $index > 0"></div>
54
<div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header" ng-bind="$group.name"></div>

‎src/bootstrap/footer.tpl.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div class="ui-select-footer" ng-transclude></div>

‎src/bootstrap/header.tpl.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div class="ui-select-header" ng-transclude></div>

‎src/bootstrap/select-multiple.tpl.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
ng-class="{'spinner': $select.refreshing}"
1818
ondrop="return false;">
1919
</div>
20-
<div class="ui-select-choices"></div>
20+
<div ng-show="$select.open && $select.items.length > 0" class="ui-select-dropdown dropdown-menu">
21+
<div class="ui-select-header"></div>
22+
<div class="ui-select-choices"></div>
23+
<div class="ui-select-footer"></div>
24+
</div>
2125
<div class="ui-select-no-choice"></div>
2226
</div>

‎src/bootstrap/select.tpl.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
placeholder="{{$select.placeholder}}"
1111
ng-model="$select.search"
1212
ng-show="$select.open">
13-
<div class="ui-select-choices"></div>
13+
<div ng-show="$select.open && $select.items.length > 0" class="ui-select-dropdown dropdown-menu">
14+
<div class="ui-select-header"></div>
15+
<div class="ui-select-choices"></div>
16+
<div class="ui-select-footer"></div>
17+
</div>
1418
<div class="ui-select-no-choice"></div>
1519
</div>

0 commit comments

Comments
 (0)