add option to always show placeholder: placeholderAlwaysVisible to ui-select-match

[ptgamr]

In tagging use case, it is useful sometime when you still want to display the placeholder even when something is selected.

[aaronroberson]

@ptgamr We are not keen on adding a plethora of directive attributes to the components. I would love to see a PR that refactors the the directives away from having a million attributes and instead accepting a config object.

[wesleycho]

Changes to dist need to be undone, and this looks like it'd need tests.

[user378230]

This can probably be written as a separate directive:

app.directive('placeholderAlwaysVisible', function() {
  return {
    require: 'uiSelect',
    link: function($scope, $element, attrs, $select) {     
      $select.getPlaceholder = function () {
        return $select.placeholder;
      }
    }
  }
});

[BojoDimov]

Hello, I have the same request, also tried making a separate directive just as you had shown before, but it doesn't seem to be working.

Here is my controller

.directive('alwaysShowPlaceholder', function () {
    return {
      restrict: 'A',
      require: 'uiSelect',
      link: function ($scope, $element, attrs, $select) {
        console.log($select);
        console.log($select.getPlaceholder);
        $select.getPlaceholder = function () {
          return $select.placeholder;
        }
      }
    };
  });

and html

<ui-select ng-if="permissionGroup.inEditMode"
                   multiple
                   class="separate-rows"
                   theme="bootstrap"
                   always-show-placeholder
                   ng-model="permissionGroup.permissions">
          <ui-select-match >{{$item.displayText}}</ui-select-match>
          <ui-select-choices repeat="permission in PermissionArray | filter:$select.search">
            <div ng-bind-html="permission.displayText | highlight: $select.search"></div>
          </ui-select-choices>
        </ui-select>

and the resulting output is:

Object {...}
undefined

which make me think that we don't have access to the underlying functions or they are not initialized at that moment, so after they initialize they overwrite our implementation.
I would really appreciate if you would help me with that problem.

[user378230]

Plunkr? I suggest maybe also trying to adjust directive priority

[BojoDimov]

Thank you for the quick response, here is the plunkr with priority property set and also executed on post link stage:
http://plnkr.co/edit/pe8v5ZeWXfloYfqE4AVd?p=preview

[ptgamr]

.getPlaceholder() is defined in uiSelectMultipleDirective's controller: $selectMultiple

So you can't override it in uiSelectDirective's controller: $select

[ptgamr]

And because of this switching template logic: https://github.com/ptgamr/ui-select/blob/cb2c5611450ea5bf5fa806416c180af9273a2755/src/uiSelectDirective.js#L21 , it's not easy to override this behavior by an external directive...

[ptgamr]

@user378230 I can suggest to move getPlaceholder to $select, so user can easily override the behavior if needed to.

I'm happy to update the PR if this way is the correct way to go.

[user378230]

@ptgamr that sounds like a good idea, can you update single select to use getPlaceholder (it should always return placeholder for single select but its good to allow users to override getPlaceholder for single select if they like.