Clever Geek Handbook

Angular proxy ui-select not working

We have used ui-select ( https://github.com/angular-ui/ui-select ) in topic dropdowns like select2. This functionality mostly worked apart from one aspect: default placeholders.

Mostly the code follows the ui-select demo (third example on this page: http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview ).

As far as I know, the default text should match the text of the "placeholder" attribute. Instead, it appears blank until you select an option. We used a hack whereby we set the ui-select-match value in the Angular controller to counteract this problem, but this is far from ideal 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 else discussed this issue or had an idea of ​​what we are doing wrong?

+3


source to share


6 answers


If you turn off search, this will hide the placeholder as well, even if there is no choice.

Spanplace 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 appears again.

As seen on hthabet on github

+2


source


I ran into this problem when I had something else in the controller related to the ng model for example producttype.selected

. Another binding would initialize the model and make the ui-select directive behave as if the selection had already been made.



If your problem is the callback on-select

is useful for binding the ui-select to another object and then using the concatenation of the data you want to return to the original object.

+3


source


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 null.

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

And here is the object reference:

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

This will also select an empty selection, which will prevent the placeholder from being displayed. I am currently working on a solution.

+1


source


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

0


source


Ui select doesn't work when search object is closed or anchor element is empty. The fastest way to do this is by adding css display: block placeholder item.

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

Or you can edit ui-select.js.

0


source


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

  • Enable enableSearch as shown below.

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

  • Or check what @TDing mentioned or @Steve Ellis has answered this post.

0


source






More articles:


All Articles