AngularJS select2 not showing any values

Question

I am using select2 the way it is specified in https://github.com/angular-ui/ui-select2

<div ng-controller="sampleController>
    <select ui-select2 ng-model="select2" data-placeholder="Pick a number">
        <option value=""></option>
        <option ng-repeat="number in range" value="{{number.value}}">{{number.text}}</option>
    </select>
</div>

But this is not working for me. I see the dropdown but there are no values to select.

If I change it to have static list as follow then it works fine.

<div ng-controller="sampleController">
    <select ui-select2 ng-model="select2" data-placeholder="Pick a number">
        <option value="">value1</option>
        <option value="">value2</option>
        <option value="">value3</option>
    </select>
</div>

What am I missing here?

My model is as follow

function sampleController($scope){
    $scope.select2="";
    $scope.range=[{text:"name1", value:"id1"},
        {text:"name2", value:"id2"},
        {text:"name3", value:"id3"}];

    $("#e1").select2();
}

The code you have shown looks fine to me. Can you include the model where you have $scope.range? Also, did you include ng-controller correctly? — kubuntu
– kubuntu, Commented Jun 27, 2014 at 19:32

Sebastien · Accepted Answer · 2014-06-27 20:47:02Z

1

I think you have to use $timeout like this :

function sampleController($scope, $timeout){
    $scope.select2="";
    $scope.range=[{text:"name1", value:"id1"},
        {text:"name2", value:"id2"},
        {text:"name3", value:"id3"}];
    $timeout(function(){
      $("#e1").select2();
    }, 0);
}

Why? Because $timeout will wait the end of the $digest (in your case ng-repeat) before to execute the function.

Your previous code did this :

Render HTML
$("#e1").select2();
interpretate ng-repeat

So, your select2 function is executed before that your select has its option elements.

Look the $timeout documentation : https://docs.angularjs.org/api/ng/service/$timeout

answered Jun 27, 2014 at 20:47

Sebastien

6,65014 gold badges60 silver badges105 bronze badges

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

Collectives™ on Stack Overflow

AngularJS select2 not showing any values

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