Dynamically add options to a Angular chosen combo box

Question

Dynamically add options to a Angular chosen combo box

The following code doesn't work:

<select ui-jq='chosen' ng-model='trainer_list' multiple class="form-control" data-placeholder="Select Multiple Trainers" ng-options='trainer.id as trainer.name for trainer in trainers'>

</select>

I took this from an Angular Bootstrap theme, and I'm struggling to use it. Basically I want to use from this angular script

$http({
        method: 'GET',
        url: 'http://localhost/training_system/retrieve_train.php?trainer=Y'
}).success(function (result) {
    $scope.trainers = result;

});

and use it in the combo box, i can't use static options, which apparently are the only ones working. what do i do?

UPDATE: So I tried the solution by Abhilash using ng-repeat instead of ng-options, and it worked the first few attempts. But now I could no longer repeat it, and all I have is an empty dropbox. I didn't change anything, but it's no longer working. Is it possible that ui-jq is incompatible with AngularJS?

2 Answers

This is how I resolved it:

In your select tag, put ng-if="trainers". This would prevent DOM loading until your http request is completed

0 Created by Aayush Jain on 2020-03-14 12:45:45 +0000 UTC

Share

Abhilash Augustine · Accepted Answer · 2020-03-14 12:45:45 +0000 UTC

Try this one:

<select ui-jq='chosen' ng-model='trainer_list' multiple class="form-control" data-placeholder="Select Multiple Trainers">
    <option value="{{trainer.id}}" ng-repeat="trainer in trainers"> {{trainer.name}} </option>
</select>

Debug your variable trainers

Just add this code anywhere in your page to debug,

<label> To Do: Remove this after testing. Trainer = {{trainers}} </label>

And see what are the values in trainer. Is this variable is updating after your server call?