We have been using ui-select () to theme dropdowns like select2. This functionality has largely been working apart from one aspect: default placeholders.

The code largely follows the ui-select demos (3rd example on this page: ).

As far as I'm concerned the default text should be that of the 'placeholder' attribute. Instead, it appears blank until you choose an option. We have been using a hack whereby we set the value of the ui-select-match, in the Angular controller to counter this issue, but this is far from perfect and clearly not how it should be used.

<ui-select data-ng-model="producttype.selected" theme="select2" name="product-type">
    <ui-select-match placeholder="Select a product type">
        {{$select.selected.title}}
    </ui-select-match>
    <ui-select-choices repeat="producttype in productTypeOptions | filter: $select.search">
        <span ng-bind-html="producttype.title | highlight: $select.search"></span>
    </ui-select-choices>                                               
</ui-select>

Has anyone ecountered this problem before, or have any idea as to what we are doing wrong?

We have been using ui-select (https://github./angular-ui/ui-select) to theme dropdowns like select2. This functionality has largely been working apart from one aspect: default placeholders.

The code largely follows the ui-select demos (3rd example on this page: http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview).

As far as I'm concerned the default text should be that of the 'placeholder' attribute. Instead, it appears blank until you choose an option. We have been using a hack whereby we set the value of the ui-select-match, in the Angular controller to counter this issue, but this is far from perfect and clearly not how it should be used.

<ui-select data-ng-model="producttype.selected" theme="select2" name="product-type">
    <ui-select-match placeholder="Select a product type">
        {{$select.selected.title}}
    </ui-select-match>
    <ui-select-choices repeat="producttype in productTypeOptions | filter: $select.search">
        <span ng-bind-html="producttype.title | highlight: $select.search"></span>
    </ui-select-choices>                                               
</ui-select>

Has anyone ecountered this problem before, or have any idea as to what we are doing wrong?

• javascript
• angularjs
• select
• angularjs-select2
• ui-select

7 Answers 7

If you're disabling search this will also hide the placeholder even when there is no selection.

The placeholder span element :

<span ng-show="$select.searchEnabled && $select.isEmpty()" class="select2-chosen ng-binding ng-hide">My Placeholder</span>

Just removed the "$select.searchEnabled &&" in the template .js file and the placeholder will appear again.

As seen on by hthabet on github

I ran into this problem when I had something else in the controller bound to the ng-model, like producttype.selected. The other binding would initialize the model and make the ui-select directive behave as if a choice had already been made.

If that's your problem, the on-select callback is helpful for binding the ui-select to another object, and then using merging the data you want back onto the original object.

You will also run into this problem if the model you are binding to is part of an object and has a key/value pair where the key exists but the value is a null.

<ui-select ng-model="vm.selectedItem.ID">....

And here is the object being referenced:

vm.selectedItem = {
  ID: null,
  description: null
}

This will result in a blank selection as well which prevents the placeholder from displaying. I'm currently working on a solution.

Check out the bootstrap class "text-muted" that is assigned to the placeholder. It has a property that sets the font color "white". So try to ment this property. It worked for me.

Ui select doesnt work when search item closed or if the binding element is empty. The fastest way to do that adding css display:block placeholder item.

.select2-chosen{
   display: block !important;
}

Or you can edit ui-select.js.

Instead of editing the source code, you can do two things to fix it.

1. Turn on enableSearch like following.

   $scope.enableSearch = function () { $scope.searchEnabled = true; };

2. Or check what @TDing mentioned or @Steve Ellis's answer on this post.

The issue here is with the isEmpty check in select.js file.

just replace this check

value = ctrl.selected; angular.isUndefined(value) || value === null;

with

angular.isUndefined(value) || value === null || angular.equals({}, value);