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.

Andrew Wynham · Answer 1 · 2016-07-18T00:08:03.550

12

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.

edited Jul 18 '16 at 00:08

answered Aug 07 '15 at 21:34

Andrew Wynham

2,310
21
25

@Dhana, did you ever try this? – Andrew Wynham Oct 07 '15 at 20:14
How are you using `select-choices` instead of `ui-select-choices`? Is this answer relevant for a certain version? – Volte Jul 15 '16 at 20:04
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. – Andrew Wynham Jul 18 '16 at 00:11
Thanks @DeezCashews, this worked. I was trying to fix this for hours. – pragya.go Jun 15 '21 at 19:36

score 9 · Answer 2 · edited Jul 21 '16 at 13:49

9

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 */
}

edited Jul 21 '16 at 13:49

pah

4,700
6
28
37

answered Jul 21 '16 at 13:41

Alexander Anikeev

701
6
15

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. – allkenang Aug 08 '17 at 09:29
worked for me either! had same trouble using simple jquery. – Oriana Ruiz Jun 11 '18 at 19:04

score 6 · Answer 3 · answered Aug 01 '15 at 10:02

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

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. — see sharper, Aug 06 '15 at 03:06

score 2 · Answer 4 · edited Sep 24 '16 at 14:27

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>

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! — Fabio says Reinstate Monica, Sep 24 '16 at 14:38

score 1 · Accepted Answer · answered Aug 13 '15 at 13:49

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>

score 1 · Answer 6 · answered Mar 09 '18 at 03:45

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.

score 1 · Answer 7 · answered Jun 16 '21 at 14:25

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>

score 0 · Answer 8 · answered Apr 27 '15 at 11:48

0

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.

answered Apr 27 '15 at 11:48

Stu

2,426
2
26
42

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. – Stu Apr 28 '15 at 14:03

score 0 · Answer 9 · answered Aug 14 '15 at 11:30

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

Adriano Rosa · Answer 10 · 2015-12-06T01:15:48.273

0

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>

edited Dec 06 '15 at 01:15

answered Dec 06 '15 at 01:10

Adriano Rosa

8,303
1
25
25

score 0 · Answer 11 · answered Jan 23 '16 at 09:19

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>

score 0 · Answer 12 · edited Sep 27 '17 at 05:21

0

I also had same Issue so i just changed:

append-to-body="true"

to:

append-to-body="false"

edited Sep 27 '17 at 05:21

Stephen Rauch

47,830
31
106
135

answered Sep 27 '17 at 04:56

Thushara

236
3
19

score 0 · Answer 13 · answered Nov 19 '19 at 05:19

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.

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

13 Answers13