Angular UI select not displaying

Question

I am currently using ui-select (https://github.com/angular-ui/ui-select) for dropdowns. I have included select.js and select.css in my index.html file. I have also installed angular-sanitize through bower.

This is what my controller looks like :

use strict';

angular.module('myApp.home', [  'ui.select',     'ngSanitize']).controller('ScheduleCtrl', ScheduleCtrl);
ScheduleCtrl['$inject'] = [ '$stateParams', '$state' ];
function ScheduleCtrl($stateParams, $state) {
    var vm=this;

    vm.itemArray = [
                    {id: 1, name: 'first'},
                    {id: 2, name: 'second'},
                    {id: 3, name: 'third'},
                    {id: 4, name: 'fourth'},
                    {id: 5, name: 'fifth'},
                ];

    vm.scheduleEvents = [{
        id:1,
        name:'Event1'
    },
    {
        id:2,
        name:'Event2'
    }];

}

And my view contains :

<ui-select ng-model="selectedItem">
    <ui-select-match>
        <span ng-bind="$select.selected.name"></span>
    </ui-select-match>
    <ui-select-choices repeat="item in (vm.itemArray | filter: $select.search) track by item.id">
        <span ng-bind="item.name"></span>
    </ui-select-choices>
</ui-select>

However, my view is blank and it does not seem to be hitting the ui-select directive.

I believe a plunkr/jsfiddle would be great for further debugging, comparing the steps you've taken to the demo: http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview it seems that it should work. Do you have any errors in the console? — Erik Svedin, Jan 08 '16 at 14:10
I'm working on putting together a plnkr now. No errors in the console. It's just not displaying anything @erikSvedin — erichardson30, Jan 08 '16 at 14:11
Did you try to do `{{item.name}}` instead of `` inside ui-select-choices tag? — Vinícius Fagundes, Jan 08 '16 at 14:15
@ViníciusFagundes yes I did. I'm not even seeing the outline of a dropdown menu though. It's just empty. The HTML is in the page source but it's not displaying anything. I think the issue is with how I'm loading in the module. — erichardson30, Jan 08 '16 at 14:18
have you included bootstrap css ? If you don't it just displays the dot of a li. If you click on it you can see it is working but you have to have bootstrap.css also to appear as an input — koox00, Jan 08 '16 at 18:11

Vinícius Fagundes · Answer 1 · 2016-01-08T14:50:34.753

1

Remove ( and ).

<ui-select-choices repeat="item in vm.itemArray | filter: $select.search track by item.id">
    <span ng-bind="item.name"></span>
</ui-select-choices>

See running on plunker.

Another thing you can test, comment this line:

//ScheduleCtrl['$inject'] = [ '$stateParams', '$state' ];

I didn't understand what it is doing, but with it the example on plunker doesn't work.

edited Jan 08 '16 at 14:50

answered Jan 08 '16 at 14:30

Vinícius Fagundes

1,983
14
24

I stil don't even have a dropdown visible on the screen. The problem I believe is how I am loading the directive in or something. I don't think it's seeing it. When I create a basic example in a plnkr it's fine, – erichardson30 Jan 08 '16 at 14:34
How are you calling you controller on that page? – Vinícius Fagundes Jan 08 '16 at 14:35
Controller is being called from the routes: .state('home.schedule', { url : "/schedule", templateUrl : "home/schedule.html", controller : "ScheduleCtrl", controllerAs : 'vm' }) – erichardson30 Jan 08 '16 at 15:14
I also took out the inject and still nothing is displaying and no errors. I put breakpoints in the select.js file and they aren't being hit. So it's definitely the module not being loaded – erichardson30 Jan 08 '16 at 15:17
You should be able to spot an error like 404 if the path is incorrect, if not there might be some error with type="" when importing the script. – Erik Svedin Jan 08 '16 at 15:24
@ErikSvedin the select.js and select.css files are being loaded in to the app correctly. It is how it is being injected into the module where the issue lies – erichardson30 Jan 08 '16 at 15:34
Do you have another entity(controller, service or w/e) overriding your "myApp.home" declaration? I.e does more than one declaration with the array of dependencies exist? – Erik Svedin Jan 08 '16 at 15:50
@ErikSvedin that was a great point! But myApp.home is only declared as a module in app.js and only has dependencies in that controller – erichardson30 Jan 08 '16 at 16:08
1

I'm sorry I'm out of ideas, double check everything. Make everything 100% as it is on plunkr as you said its working there? I guess if you're able to zip your project I could look at it. Otherwise just keep checking for typos I guess. Probably is something silly, like it usually is – Erik Svedin Jan 08 '16 at 16:32
`ng-app="yourApp"` on body tag? Check on browser console if all assets are being loaded. If it isn't the error only with the full code we can help... like @ErikSvedin said. – Vinícius Fagundes Jan 08 '16 at 22:02

Angular UI select not displaying

1 Answers1

Linked