Merge pull request #1011 from khanhto/master

aaronroberson · aaronroberson · commit 5f87457279fc · 2016-03-28T06:41:16.000-07:00
feat(ui-select-no-choice): allow displaying information when there is no record found

Adds a directive element for a no choice selection:
&lt;ui-select-no-choice&gt;
      &lt;div style="text-align: center;"&gt;There is nothing to show&lt;/div&gt;
    &lt;/ui-select-no-choice&gt;
diff --git a/src/bootstrap/no-choice.tpl.html b/src/bootstrap/no-choice.tpl.html
@@ -0,0 +1,6 @@
+<ul class="ui-select-no-choice dropdown-menu"
+    ng-show="$select.items.length == 0">
+    <li ng-transclude>
+
+    </li>
+</ul>
diff --git a/src/bootstrap/select.tpl.html b/src/bootstrap/select.tpl.html
@@ -10,4 +10,5 @@
          ng-model="$select.search"
          ng-show="$select.searchEnabled && $select.open">
   <div class="ui-select-choices"></div>
+  <div class="ui-select-no-choice"></div>
 </div>
diff --git a/src/common.css b/src/common.css
@@ -153,7 +153,7 @@ body > .select2-container.open {
 }
 
 /* See Scrollable Menu with Bootstrap 3 https://stackoverflow.com/questions/19227496 */
-.ui-select-bootstrap > .ui-select-choices {
+.ui-select-bootstrap > .ui-select-choices ,.ui-select-bootstrap > .ui-select-no-choice {
   width: 100%;
   height: auto;
   max-height: 200px;
diff --git a/src/uiSelectDirective.js b/src/uiSelectDirective.js
@@ -214,6 +214,13 @@ uis.directive('uiSelect',
             throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-choices but got '{0}'.", transcludedChoices.length);
           }
           element.querySelectorAll('.ui-select-choices').replaceWith(transcludedChoices);
+
+          var transcludedNoChoice = transcluded.querySelectorAll('.ui-select-no-choice');
+          transcludedNoChoice.removeAttr('ui-select-no-choice'); //To avoid loop in case directive as attr
+          transcludedNoChoice.removeAttr('data-ui-select-no-choice'); // Properly handle HTML5 data-attributes
+          if (transcludedNoChoice.length == 1) {
+            element.querySelectorAll('.ui-select-no-choice').replaceWith(transcludedNoChoice);
+          }
         });
 
         // Support for appending the select field to the body when its open
diff --git a/src/uiSelectNoChoiceDirective.js b/src/uiSelectNoChoiceDirective.js
@@ -0,0 +1,14 @@
+uis.directive('uiSelectNoChoice',
+    ['uiSelectConfig', function (uiSelectConfig) {
+        return {
+            restrict: 'EA',
+            require: '^uiSelect',
+            replace: true,
+            transclude: true,
+            templateUrl: function (tElement) {
+                // Gets theme attribute from parent (ui-select)
+                var theme = tElement.parent().attr('theme') || uiSelectConfig.theme;
+                return theme + '/no-choice.tpl.html';
+            }
+        };
+    }]);

Original file line number	Diff line number	Diff line change
`@@ -153,7 +153,7 @@ body > .select2-container.open {`
`153`	`153`	`}`
`154`	`154`
`155`	`155`	`/* See Scrollable Menu with Bootstrap 3 https://stackoverflow.com/questions/19227496 */`
`156`		`-.ui-select-bootstrap > .ui-select-choices {`
	`156`	`+.ui-select-bootstrap > .ui-select-choices ,.ui-select-bootstrap > .ui-select-no-choice {`
`157`	`157`	`width: 100%;`
`158`	`158`	`height: auto;`
`159`	`159`	`max-height: 200px;`