diff --git a/source/directives/select-field.ts b/source/directives/select-field.ts index 292e071..b6bf57c 100644 --- a/source/directives/select-field.ts +++ b/source/directives/select-field.ts @@ -241,7 +241,8 @@ module formFor { $scope.allowBlank = $attributes.hasOwnProperty('allowBlank'); $scope.preventDefaultOption = $attributes.hasOwnProperty('preventDefaultOption'); - + $scope.showPlaceholderForEmptyValues = $attributes.hasOwnProperty('showPlaceholderForEmptyValues'); + // Read from $attributes to avoid getting any interference from $scope. $scope.labelAttribute = $attributes['labelAttribute'] || 'label'; $scope.valueAttribute = $attributes['valueAttribute'] || 'value'; @@ -315,8 +316,12 @@ module formFor { $scope.bindableOptions.push.apply($scope.bindableOptions, $scope.options); // Once a value has been selected, clear the placeholder prompt. - if ($scope.model.bindable) { + if ($scope.model.bindable && !$scope.showPlaceholderForEmptyValues) { $scope.emptyOption[$scope.labelAttribute] = ''; + $scope.emptyOption.hide = false; + } else if ($scope.showPlaceholderForEmptyValues && $scope.model.bindable === undefined) { + $scope.emptyOption[$scope.labelAttribute] = $scope.placeholder; + $scope.emptyOption.hide = true; } }; @@ -412,4 +417,4 @@ module formFor { ($document, $log, $timeout, FieldHelper, FormForConfiguration) => { return new SelectFieldDirective($document, $log, $timeout, FieldHelper, FormForConfiguration); }); -} \ No newline at end of file +} diff --git a/styles/default/select-field.styl b/styles/default/select-field.styl index 1f3705b..ecd4751 100644 --- a/styles/default/select-field.styl +++ b/styles/default/select-field.styl @@ -29,6 +29,14 @@ select-field { opacity: $opacity-disabled; } } + + &.placeholder { + color: #999999; + option: { + color: #555555; + } + } + } &.invalid select { diff --git a/templates/bootstrap/select-field/_select.html b/templates/bootstrap/select-field/_select.html index 69aa4d6..3e69488 100644 --- a/templates/bootstrap/select-field/_select.html +++ b/templates/bootstrap/select-field/_select.html @@ -2,8 +2,13 @@ id="{{model.uid}}" name="{{attribute}}" class="form-control" + ng-class="{{placeholder: !model.bindable}}" tabindex="{{tabIndex}}" ng-disabled="disable || model.disabled" - ng-model="model.bindable" - ng-options="option[valueAttribute] as option[labelAttribute] for option in bindableOptions"> - \ No newline at end of file + ng-model="model.bindable"> + +