Angular ui-select not displaying

Question

I want to use ui-select, but it is not displaying anything and there are no errors in the developer console. I've been googling this for a few hours now and I've tried all the suggestions I've found, but nothing has helped.

I use Chrome and I've included Bootstrap version 3.3.4 and Angular version 1.4.8 in my SPA project. I've also included the latest versions of select.min.css and select.min.js. I added ui-select (version 0.19.5) to my project through NuGet in Visual Studio 2015.

I've reduced my code to a very simple example while trying to isolate the problem. Here is what I have right now (this is in my view):

<div id="damageType" name="damageType" class="col-md-4">
    <ui-select ng-maxlength="10">

        <ui-select-choices repeat="f in ['light','hpexp']">
            {{ f }}
        </ui-select-choices>
    </ui-select>
</div>

I've tried adding a ng-hide, like so, to no avail:

<div id="damageType" name="damageType" class="col-md-4">
    <ui-select ng-maxlength="10">

        <ui-select-choices repeat="f in ['light','hpexp']" ng-hide="!$select.open">
            {{ f }}
        </ui-select-choices>
    </ui-select>
</div>

Here is what it looks like in the page. The div where the drop-down should be displayed is there, but it's height is 1. Also, as you can see, there are no errors in the console:

What could be the problem here?

Jefiozie · Accepted Answer · 2017-03-15 14:28:54Z

1

Hi I think you are missing two things.

The ui-select needs a ngModel so define this ng-model='selectedvalue'
Second I believe it needs a ui-select-match as this is needed for the transclusion

The code below should work:

<ui-select ng-model="ctrl.selected">
 <ui-select-match placeholder="Enter an thing...">{{$select.selected}}</ui-select-match>
 <ui-select-choices repeat="item in ['1','2']">
  <span>{{item}}</span>
</ui-select-choices>

answered Mar 15, 2017 at 14:28

Jefiozie

1339 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular ui-select not displaying

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related