6

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.

7
  • I believe a plunkr/jsfiddle would be great for further debugging, comparing the steps you've taken to the demo: plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview it seems that it should work. Do you have any errors in the console? Commented Jan 8, 2016 at 14:10
  • I'm working on putting together a plnkr now. No errors in the console. It's just not displaying anything @erikSvedin Commented Jan 8, 2016 at 14:11
  • Did you try to do {{item.name}} instead of <span ng-bind="item.name"></span> inside ui-select-choices tag? Commented Jan 8, 2016 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. Commented Jan 8, 2016 at 14:18
  • in which browser did you use/tried? Commented Jan 8, 2016 at 15:59

1 Answer 1

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.

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

10 Comments

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,
How are you calling you controller on that page?
Controller is being called from the routes: .state('home.schedule', { url : "/schedule", templateUrl : "home/schedule.html", controller : "ScheduleCtrl", controllerAs : 'vm' })
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
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
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.