Feature - header & footer

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

@@ -0,0 +1,17 @@
+<h3>Basic Header and Footer</h3>
+<p>Selected: {{ctrl.address.selected.formatted_address}}</p>
+<ui-select ng-model="ctrl.address.selected"
+           theme="bootstrap"
+           ng-disabled="ctrl.disabled"
+           reset-search-input="false"
+           style="width: 300px;"
+           title="Choose an address">
+  <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
+  <ui-select-header><h4>Simple Header</h4></ui-select-header>
+  <ui-select-choices repeat="address in ctrl.addresses track by $index"
+           refresh="refreshAddresses($select.search)"
+           refresh-delay="0">
+    <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
+  </ui-select-choices>
+  <ui-select-footer><strong>Simple Footer</strong></ui-select-footer>
+</ui-select>

src/uiSelectDirective.js

@@ -227,6 +227,33 @@ uis.directive('uiSelect',
           if (transcludedNoChoice.length == 1) {
             element.querySelectorAll('.ui-select-no-choice').replaceWith(transcludedNoChoice);
           }
+
+          var transcludedHeader = transcluded.querySelectorAll('.ui-select-header');
+          var transcludedFooter = transcluded.querySelectorAll('.ui-select-footer');
+          if((transcludedHeader && transcludedHeader.length) || (transcludedFooter && transcludedFooter.length)){
+            $timeout(function(){
+              var selectChoices = element.querySelectorAll('.ui-select-choices');
+
+              if(transcludedHeader && transcludedHeader.length){
+                transcludedHeader.removeAttr('ui-select-header'); // To avoid loop in case directive as attr
+                transcludedHeader.removeAttr('ng-transclude'); // Content has already been transcluded
+                transcludedHeader.removeAttr('data-ui-select-header'); // Properly handle HTML5 data-attributes
+                transcludedHeader.removeAttr('data-ng-transclude');
+                selectChoices.prepend(transcludedHeader);
+              }
+
+              if(transcludedFooter && transcludedFooter.length){
+                transcludedFooter.removeAttr('ui-select-footer'); // To avoid loop in case directive as attr
+                transcludedFooter.removeAttr('ng-transclude'); // Content has already been transcluded
+                transcludedFooter.removeAttr('data-ui-select-footer'); // Properly handle HTML5 data-attributes
+                transcludedFooter.removeAttr('data-ng-transclude');
+                selectChoices.append(transcludedFooter);
+              }
+
+              // re-compile selectChoices in case header or footer requires one of ui-select-choice's directives
+              $compile(selectChoices)(scope);
+            });
+          }
         });
 
         // Support for appending the select field to the body when its open

src/uiSelectFooterDirective.js

@@ -0,0 +1,8 @@
+uis.directive('uiSelectFooter', function(){
+  return {
+    template: '<li class="ui-select-footer" ng-transclude></li>',
+    restrict: 'EA',
+    transclude: true,
+    replace: true
+  };
+});

src/uiSelectHeaderDirective.js

@@ -0,0 +1,8 @@
+uis.directive('uiSelectHeader', function(){
+  return {
+    template: '<li class="ui-select-header" ng-transclude></li>',
+    restrict: 'EA',
+    transclude: true,
+    replace: true
+  };
+});