From 86a6c5d0a56969b316211552f91ffa9d672fff08 Mon Sep 17 00:00:00 2001 From: hutzelknecht Date: Tue, 6 Oct 2015 15:59:21 +0200 Subject: [PATCH 1/7] show placeholders also for empty values --- source/directives/select-field.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/source/directives/select-field.ts b/source/directives/select-field.ts index 292e071..5219444 100644 --- a/source/directives/select-field.ts +++ b/source/directives/select-field.ts @@ -317,6 +317,8 @@ module formFor { // Once a value has been selected, clear the placeholder prompt. if ($scope.model.bindable) { $scope.emptyOption[$scope.labelAttribute] = ''; + } else if ($scope.model.bindable === undefined) { + $scope.emptyOption[$scope.labelAttribute] = $scope.placeholder; } }; @@ -412,4 +414,4 @@ module formFor { ($document, $log, $timeout, FieldHelper, FormForConfiguration) => { return new SelectFieldDirective($document, $log, $timeout, FieldHelper, FormForConfiguration); }); -} \ No newline at end of file +} From c7dc8b54dde354a260b80b3994252568caaa61d2 Mon Sep 17 00:00:00 2001 From: hutzelknecht Date: Tue, 6 Oct 2015 16:13:32 +0200 Subject: [PATCH 2/7] optional: show placeholder for empty values --- source/directives/select-field.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/source/directives/select-field.ts b/source/directives/select-field.ts index 5219444..55a23c3 100644 --- a/source/directives/select-field.ts +++ b/source/directives/select-field.ts @@ -211,6 +211,7 @@ module formFor { disable: '=', help: '@?', multiple: '=?', + showPlaceholderForEmptyValues: '=?', options: '=' }; @@ -315,9 +316,9 @@ 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] = ''; - } else if ($scope.model.bindable === undefined) { + } else if ($scope.showPlaceholderForEmptyValues && $scope.model.bindable === undefined) { $scope.emptyOption[$scope.labelAttribute] = $scope.placeholder; } }; From 23bc5b057fc1065018d1bc4bf14ad593bf56de19 Mon Sep 17 00:00:00 2001 From: Micha Date: Mon, 9 Nov 2015 09:46:26 +0100 Subject: [PATCH 3/7] check for presence of "showPlaceholderForEmptyValues"-attribute --- source/directives/select-field.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/directives/select-field.ts b/source/directives/select-field.ts index 55a23c3..86a6a0e 100644 --- a/source/directives/select-field.ts +++ b/source/directives/select-field.ts @@ -211,7 +211,6 @@ module formFor { disable: '=', help: '@?', multiple: '=?', - showPlaceholderForEmptyValues: '=?', options: '=' }; @@ -242,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'; From 704eb0e014bf24f7c387b5701c0ac3a83bc6af85 Mon Sep 17 00:00:00 2001 From: Micha Date: Mon, 9 Nov 2015 13:46:12 +0100 Subject: [PATCH 4/7] if blank value is selected, hide in options, but display placeholder; if non-blank value is selected, show in options; --- source/directives/select-field.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/source/directives/select-field.ts b/source/directives/select-field.ts index 86a6a0e..b6bf57c 100644 --- a/source/directives/select-field.ts +++ b/source/directives/select-field.ts @@ -318,8 +318,10 @@ module formFor { // Once a value has been selected, clear the placeholder prompt. 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; } }; From 386f8cff0978b2ff9dbad95f1bb49aa3a13d2fbc Mon Sep 17 00:00:00 2001 From: Micha Date: Mon, 9 Nov 2015 13:50:57 +0100 Subject: [PATCH 5/7] ability to hide options --- templates/bootstrap/select-field/_select.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/templates/bootstrap/select-field/_select.html b/templates/bootstrap/select-field/_select.html index 69aa4d6..b779b92 100644 --- a/templates/bootstrap/select-field/_select.html +++ b/templates/bootstrap/select-field/_select.html @@ -4,6 +4,10 @@ class="form-control" 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"> + + From 7710fbc5895eeb21047f20b538f77eef71bf0b01 Mon Sep 17 00:00:00 2001 From: Micha Date: Mon, 9 Nov 2015 14:20:30 +0100 Subject: [PATCH 6/7] placeholder in light grey, options remain black --- styles/default/select-field.styl | 8 ++++++++ 1 file changed, 8 insertions(+) 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 { From dab3cb5f1b870242709b88df12a708a8f0047c32 Mon Sep 17 00:00:00 2001 From: Micha Date: Mon, 9 Nov 2015 14:21:45 +0100 Subject: [PATCH 7/7] set a class if an empty value is selected --- templates/bootstrap/select-field/_select.html | 1 + 1 file changed, 1 insertion(+) diff --git a/templates/bootstrap/select-field/_select.html b/templates/bootstrap/select-field/_select.html index b779b92..3e69488 100644 --- a/templates/bootstrap/select-field/_select.html +++ b/templates/bootstrap/select-field/_select.html @@ -2,6 +2,7 @@ id="{{model.uid}}" name="{{attribute}}" class="form-control" + ng-class="{{placeholder: !model.bindable}}" tabindex="{{tabIndex}}" ng-disabled="disable || model.disabled" ng-model="model.bindable">