5

We have been using ui-select (https://github.com/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?

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
WillSeabrook
  • 108
  • 1
  • 2
  • 10

7 Answers7

3

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.

Steve Ellis
  • 494
  • 5
  • 13
  • Cheers. I looked into this, but this didn't appear to be the problem as I only had one model on the page at the time. – WillSeabrook Jan 19 '15 at 10:58
  • 2
    Problem i had was that the '.selected' variable i bound was initialised to {} which made the plugin think i already selected an item. I initialised it to null and it worked – KristofMols Apr 28 '15 at 11:49
3

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

timtom
  • 133
  • 8
1

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.

Marcidius
  • 249
  • 1
  • 5
0

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 comment this property. It worked for me.

voodoo_patch
  • 472
  • 4
  • 16
0

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.

Hadnazzar
  • 1,517
  • 19
  • 21
0

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.

Mahib
  • 3,977
  • 5
  • 53
  • 62
0

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);

Sunny Nirala
  • 9
  • 1