diff --git a/examples/data/titlemaps.json b/examples/data/titlemaps.json index e56cc5f..cd99411 100644 --- 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 index 8c20653..4f9ee32 100644 --- 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},