Angular ui-select is not displaying the list of options when included in angular-ui-bootstrap modal

Question

I am facing an issue with the anular-ui-bootstrap modal directive. Am using the angular's ui-select component in my app as a replacement for the html select. This ui-select is working fine in any page it is being included. But when i tried to include it in a modal pop up(using ui-bootstrap $modal service), the drop-down is not displaying the options

The issue is reproduced here

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
  $scope.addresses = [{
  "id":1,
    "name": "chennai"
  }, {
    "id":2,
    "name": "banglore"
  }, {
    "id":3,
    "name": "madurai"
  }];
});

 <div class="modal-body">
        City
            <ui-select ng-model="selAddress">
                <ui-select-match placeholder="Choose an address">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="address in addresses track by $index" refresh-delay="0">
                    <div ng-bind-html="address.a | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
            
            Selected: <b>{{ selAddress }}</b>
        </div>

Any help would be much appreciated. Thanks in advance.

Aleutian

Answer 1

Thanks for all your responses for my question. Actually i was trying a lot to fix this issue for long and finally i myself figured out that it is somewere an issue with AngularJS i guess. Yes, i was able to fix this by just updating the version of AngularJS from 1.2.16 to 1.2.20. And the working link is here

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>

to

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js"></script>

and also a minor fix of below

<div ng-bind-html="address.a | highlight: $select.search"></div>

to

<div ng-bind-html="address.name | highlight: $select.search"></div>

Aleutian

Answer 2

I ran into this (or something similar) with ngDialog. I fixed my problem by adding a ng-hide attribute like so:

<ui-select-choices repeat="..." ng-hide="!$select.open">

This fixed the problem that I had where select-choices was given a ng-hide empty attribute by the component for some reason internally when in a dialog. Hope this helps you workaround this issue as well.

Undersexed

@Dhana, did you ever try this? – Undersexed

How are you using select-choices instead of ui-select-choices? Is this answer relevant for a certain version? – Ferrocyanide

Thanks Volte, it is indeed ui-select-choices... important part is the ng-hide attribute to keep the choices from being hidden permanently if the list is empty to begin with. – Undersexed

Thanks @DeezCashews, this worked. I was trying to fix this for hours. – Prodigious

Answer 3

Need to add the attribute: append-to-body="false" or if you only have to, change in CSS:

body > .ui-select-bootstrap.open {
    z-index: 1100; /* greater then ui bootstrap modal, that 1050 */
}

Muraida

This worked for me! In my case, I was using ui-select (0.18.1) inside an angular-modal-service (0.12.2) and my issue then was that the select box kept disappearing whenever I clicked it. – Louielouis

worked for me either! had same trouble using simple jquery. – Antenatal

Answer 4

In the $templateCache at the bottom of select.js of ui-select, the first template is 'bootstrap/choices.tpl.html', in which 'ng-show=\"$select.items.length > 0\"' is present, what this does is to hide the dropdown list from appearing when there is no choices to display.

I figured that your problem is because when ui-select is rendering in the modal, the collection(in your case addresses) is empty and therefore its length is 0, as a result 'ng-hide' class is added to the element, causing the problem.

My way of hacking it is simply remove the 'ng-show=\"$select.items.length > 0\"', or change it to 'ng-show=\"$select.items.length >= 0\"'(making it useless). The side affect is that the dropdown will show an empty bank list when there is no choices to display. I rather like the side affect, it gives the user assurance that the list is working.

The height of the empty list is however too narrow and so I would add a css class to make the empty list a little higher:

.ui-select-choices{ min-height: 30px; }

Covin

Spot on, though it's a mystery as to why the items.length == 0 when there are items present, and why this specifically and only occurs when the ui-select is in a modal. – Fr

Answer 5

I had the same issue, solved it with:

<div class="row" ng-controller="*protopathyUISelectCtrl as ctrl*">
  <div class="form-group m-b-sm required col-md-4 col-xs-3" >
      <div class="input-group">
        <span class="input-group-addon">test</span>
        <ui-select ng-model="ctrl.country.selected" theme="bootstrap" title="Choose a country" ng-disabled="disabled" append-to-body="false">
          <ui-select-match placeholder="test">{{$select.selected.name}}</ui-select-match>
          <ui-select-choices repeat="country in ctrl.countries | filter: $select.search">
            <span ng-bind-html="country.name | highlight: $select.search"></span>
            <small ng-bind-html="country.code | highlight: $select.search"></small>
          </ui-select-choices>
        </ui-select>
      </div>
  </div>
</div>

Fere

If you realize you have forgotten something you should edit your answer, not leave it as a comment. Comments are not read by all, they could be deleted, and do not allow proper code formatting. So please edit your answer, put the additional info there, and remove the comment. Thank you! – Corvette

Answer 6

I also met this problem while using ui-modal and I solve this using 'ng-class' condition to the ui-select-choices directive:

modal.html ```

<ui-select ng-model="person.selected" theme="bootstrap" on-select="onSelect($item)" ng-click="select_open = true">
    <ui-select-match placeholder="制作者">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="item in people | propsFilter: {name: $select.search, email: $select.search}" ng-class="{ 'select_open': select_open }">
        <div ng-bind-html="item.name | highlight: $select.search"></div>
        <small ng-bind-html="item.email | highlight: $select.search"></small>
    </ui-select-choices>
    <ui-select-no-choice>
        一致するものは見つかりませんでした。
    </ui-select-no-choice>
</ui-select>

```

app.js ```

$scope.onSelect = function(item) {
    $scope.open_select = false;
}

```

style.css ```

.select_open {
    opacity: 1 !important;
}

```

Hope it helps. 👍

Roping

Answer 7

I've got the same problem, to resolve it I just install select2 https://www.npmjs.com/package/select2 and i import on my component who use ui-select like this:

import uiSelect from 'ui-select'
import 'ui-select/dist/select.min.css'
import 'select2/select2.css'

const myModule = angular.module("myModule", [ uiSelect ]);

<ui-select
        multiple
        ng-model="$ctrl.personSelected"
        close-on-select="false"
        theme="select2"
        style="width:100%"
        class="form-group"
>
    <ui-select-match>{{$item}}</ui-select-match>
    <ui-select-choices repeat="person in $ctrl.listPerson">
        {{ person.name }}
    </ui-select-choices>
</ui-select>

Brython

Answer 8

If you change the line to be:

<ui-select-choices repeat="address.name in addresses track by $index" refresh-delay="0">

http://plnkr.co/edit/ybGQ9utrxR2sr8JyVc3g?p=preview

it displays the name of the address.

Evette

OK, I've updated it a bit. The binding is working (you have to bind to something on $scope.obj.obj rather than just $scope.obj it would seem. The list is displaying empty points though but you might have more knowledge on that one but the binding is working. I've updated the Plunkr so the same like should be more helpful. – Evette

Answer 9

Error occurs here in select.js

(line 610: ctrl.searchInput.css('width', '10px');)

In this case input tag has width: 10px. You can click in this 10px-area - and it will work. As we use this lib via bower - I've fix it without touching source in the following way:

<ui-select-match placeholder="placeholder..." ng-class="{empty: !account.roles.length}">{{::$item.name}}</ui-select-match>

so, if model array is empty - just make width of input 100%. We use 'select2' theme

.empty.ui-select-match + .select2-search-field,
.empty.ui-select-match + .select2-search-field input{
    width: 100% !important;
}

Capitalist

Answer 10

I had the same issue, I fix it by adding the attribute append-to-body="false".

<ui-select title="Origem" ng-disabled="disabled" append-to-body="false">
 ...
</ui-select>

Lisalisabet

Answer 11

I had a similar issue. I solved it by replacing ng-show with ng-if

<button ng-click="toggle=!toggle">Toggle</button>
<div ng-if="toggle">
    <ui-select multiple ng-model="data.projectStatusArray" theme="bootstrap" ng-disabled="disabled" style="margin:0px;">
        <ui-select-match class="ui-font-medium" placeholder="Choose Filter"> {{$item.display_name}} </ui-select-match>
        <ui-select-choices repeat="fl.name as fl in filterByArray | filter: $select.search">
            {{fl.display_name}}
        </ui-select-choices>
    </ui-select>
</div>

Chromato

Answer 12

I also had same Issue so i just changed:

append-to-body="true"

to:

append-to-body="false"

Trask

Answer 13

This is an issue with ui-select in case of modal where the opacity gets set to 0. I tried lot of different approaches but the issue still remained.

This link explains the issue.

This is what you can do:

• Add a bool variable and set it to true in $scope (Ex: $scope.showDD = true)
• In ui-select-choices, add the following code:

<ui-select-choices repeat="dog in dogs" ng-show="(showDD) || ">

Here by adding braces around showDD variable, I have set the evaluation priority high to showDD and it ORs with the other check ui-select does. Since its an OR, showDD overrides the internal check that ui-select does and the opacity does not get set to 0.

Physicalism