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

Commit b743fcc

Browse files
committed
added uiSelectHeader and uiSelectFooter directives.
updated uiSelect directive's transclusion to include ui-select-header and ui-select-footer elements
1 parent 9d11dd1 commit b743fcc

File tree

4 files changed

+60
-0
lines changed

4 files changed

+60
-0
lines changed
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<h3>Basic Header and Footer</h3>
2+
<p>Selected: {{ctrl.address.selected.formatted_address}}</p>
3+
<ui-select ng-model="ctrl.address.selected"
4+
theme="bootstrap"
5+
ng-disabled="ctrl.disabled"
6+
reset-search-input="false"
7+
style="width: 300px;"
8+
title="Choose an address">
9+
<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
10+
<ui-select-header><h4>Simple Header</h4></ui-select-header>
11+
<ui-select-choices repeat="address in ctrl.addresses track by $index"
12+
refresh="refreshAddresses($select.search)"
13+
refresh-delay="0">
14+
<div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
15+
</ui-select-choices>
16+
<ui-select-footer><strong>Simple Footer</strong></ui-select-footer>
17+
</ui-select>

src/uiSelectDirective.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,33 @@ uis.directive('uiSelect',
227227
if (transcludedNoChoice.length == 1) {
228228
element.querySelectorAll('.ui-select-no-choice').replaceWith(transcludedNoChoice);
229229
}
230+
231+
var transcludedHeader = transcluded.querySelectorAll('.ui-select-header');
232+
var transcludedFooter = transcluded.querySelectorAll('.ui-select-footer');
233+
if((transcludedHeader && transcludedHeader.length) || (transcludedFooter && transcludedFooter.length)){
234+
$timeout(function(){
235+
var selectChoices = element.querySelectorAll('.ui-select-choices');
236+
237+
if(transcludedHeader && transcludedHeader.length){
238+
transcludedHeader.removeAttr('ui-select-header'); // To avoid loop in case directive as attr
239+
transcludedHeader.removeAttr('ng-transclude'); // Content has already been transcluded
240+
transcludedHeader.removeAttr('data-ui-select-header'); // Properly handle HTML5 data-attributes
241+
transcludedHeader.removeAttr('data-ng-transclude');
242+
selectChoices.prepend(transcludedHeader);
243+
}
244+
245+
if(transcludedFooter && transcludedFooter.length){
246+
transcludedFooter.removeAttr('ui-select-footer'); // To avoid loop in case directive as attr
247+
transcludedFooter.removeAttr('ng-transclude'); // Content has already been transcluded
248+
transcludedFooter.removeAttr('data-ui-select-footer'); // Properly handle HTML5 data-attributes
249+
transcludedFooter.removeAttr('data-ng-transclude');
250+
selectChoices.append(transcludedFooter);
251+
}
252+
253+
// re-compile selectChoices in case header or footer requires one of ui-select-choice's directives
254+
$compile(selectChoices)(scope);
255+
});
256+
}
230257
});
231258

232259
// Support for appending the select field to the body when its open

src/uiSelectFooterDirective.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
uis.directive('uiSelectFooter', function(){
2+
return {
3+
template: '<li class="ui-select-footer" ng-transclude></li>',
4+
restrict: 'EA',
5+
transclude: true,
6+
replace: true
7+
};
8+
});

src/uiSelectHeaderDirective.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
uis.directive('uiSelectHeader', function(){
2+
return {
3+
template: '<li class="ui-select-header" ng-transclude></li>',
4+
restrict: 'EA',
5+
transclude: true,
6+
replace: true
7+
};
8+
});

0 commit comments

Comments
 (0)