Merge pull request #17 from kornosaurus/select-placeholder

Add support for placeholder on type select
json-schema-form · May 23, 2016 · 0a40f4b · 0a40f4b
2 parents aa81f65 + 7c8e25d
commit 0a40f4b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/examples/data/titlemaps.json b/examples/data/titlemaps.json
@@ -51,6 +51,7 @@
     {
       "key": "select2",
       "type": "select",
+      "placeholder": "Please choose",
       "titleMap": {
         "a": "A",
         "b": "B",
@@ -60,6 +61,7 @@
     {
       "key": "noenum",
       "type": "select",
+      "placeholder": "Please choose",
       "titleMap": [
         { "value":"a", "name": "A" },
         { "value":"b", "name":"B" },

diff --git a/src/bootstrap-decorator.js b/src/bootstrap-decorator.js
@@ -28,6 +28,33 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
     }
   };
 
+  var selectPlaceholder = function(args) {
+    if (args.form.placeholder) {
+      var selectBox = args.fieldFrag.querySelector('select');
+      var option = document.createElement('option');
+      option.setAttribute('value', '');
+
+      /* We only want the placeholder to show when we do not have a value on the model.
+       * We make ngModel builder replace all so we can use $$value$$.
+       */
+      option.setAttribute('sf-field-model', 'replaceAll');
+
+      /* https://github.com/angular/angular.js/issues/12190#issuecomment-115277040
+       * angular > 1.4 does a emptyOption.attr('selected', true)
+       * which does not like the ng-if comment.
+       */
+      if (angular.version.major === 1 && angular.version.minor < 4) {
+        option.setAttribute('ng-if', '$$value$$ === undefined');
+      } else {
+        option.setAttribute('ng-show', '$$value$$ === undefined');
+      }
+
+      option.textContent = args.form.placeholder;
+
+      selectBox.appendChild(option);
+    }
+  };
+
   var defaults = [sfField, ngModel, ngModelOptions, condition];
   decoratorsProvider.defineDecorator('bootstrapDecorator', {
     textarea: {template: base + 'textarea.html', builder: defaults},
@@ -38,7 +65,7 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
     section: {template: base + 'section.html', builder: [sfField, simpleTransclusion, condition]},
     conditional: {template: base + 'section.html', builder: [sfField, simpleTransclusion, condition]},
     actions: {template: base + 'actions.html', builder: defaults},
-    select: {template: base + 'select.html', builder: defaults},
+    select: {template: base + 'select.html', builder: [selectPlaceholder, sfField, ngModel, ngModelOptions, condition]},
     checkbox: {template: base + 'checkbox.html', builder: defaults},
     checkboxes: {template: base + 'checkboxes.html', builder: [sfField, ngModelOptions, ngModel, array, condition]},
     number: {template: base + 'default.html', builder: defaults},