, wie Werte von Array hinzufügen Combobox mit Suche nach Bootstrap

Question

ich die Bootstrap-Combobox mit Suche bin mit der feinen arbeitet, wenn sie mit statischen Optionen vollständig wie folgt:

<form role="form"> 
    <div class="form-group"> 
     <label>Select options</label> 
     <select class="combobox input-large form-control" style="display: none;"> 
      <option value="" selected="selected">Type Planet name...</option> 
      <option value="0">Mercury</option> 
      <option value="1">Earth</option> 
      <option value="2">Venus</option> 
      <option value="3">Mars</option> 
      <option value="4">Jupiter</option> 
     </select> 
    </div> 
</form> 

ich die Optionen dynamisch aus einer zu ladende Array. Ich habe versucht, ng-Optionen und ng-repeat, aber die Werte kommen nicht in das Kombinationsfeld. Ich bevorzuge die Verwendung von Javascript.

Versuchte Option:

<select class="combobox input-large form-control" style="display: none;" 
     ng-model="PlanetData.selectedPlanet"> 
     option value="" selected="selected">Type for Planet...</option> 
     <option ng-repeat="planet in PlanetData.availablePlanets" value=" {{planet.id}}">{{planet.planetName}}</option> 

Dies schafft die Combobox mit dem Text „Typ für den Kanal“, aber die planetdata nicht in den die Combobox Optionen erscheint eher erscheint es darunter. Ich möchte wissen, wie man die beiden bindet, damit die Daten in die Combobox kommen.

Answer 1

Das Problem ist, dass, wenn die combobox Funktion wird die ng-Repeat oder die ngOptions gerendert nicht die Optionen noch genannt.

Ein schneller Weg, um dies zu beheben, ist die $('.combobox').combobox() innerhalb einer $timeout Rückruf anrufen.

$scope.items = [{id: 1, text: 'text1'}, {id: 2, text: 'text2'}]; 

$timeout(() => 
    $('.combobox').combobox(), 0); 

Siehe Plunker mit diesem Beispiel: https://plnkr.co/edit/j25lasvpHxmMNUjl7EjE?p=preview

ich mit ngRepeat getestet und ngOptions.

Answer 2

var planet = ['Mercury','Mercury1']; 
 

 
$.each(planet, function(index, value){ 
 
    
 
$('.combobox').append('<option value="'+index+'">'+value+'</option>'); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form role="form"> 
 
    <div class="form-group"> 
 
     <label>Select options</label> 
 
     <select class="combobox input-large form-control"> 
 
      
 
     </select> 
 
    </div> 
 
</form>

Answer 3

Das Problem war wegen der ng-Optionen oder ng-Wiederholung nicht gerendert, wenn die Combobox erschien. Beziehen Sie sich auf die Antwort von Rafael, es hat alle notwendigen Details. Ich nutzte die Auszeit, wie er vorgeschlagen hatte, und es funktionierte wie ein Zauber.

$ timeout (() => $ ('. Combobox'). Combobox(), 100);