javascriptangularjsselectangularjs-select2ui-select

Angular ui-select placeholder not working


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?


Solution

  • 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