Leerer Drop-Down beim Hinzufügen <select> mit Hilfe von Javascript mit insertAdjacentHTML und ng-Optionen

Question

Also hier in dieser Geige ich in beiden Richtungen habe: https://jsfiddle.net/cicerohellmann/Lt8gju19/

In html ich es genannt und es funktionierte.

<select ng-model="ampm" ng-options="item.friendName for item in options[1]"></select> 

AM/PM: {{}} ampm

Javascript APPEN mit nicht funktioniert.

html = 
"<select ng-model='ampm' 
ng-options='item.friendName for item in options[1]' 
class='ng-pristine ng-valid'></select>"; 


div = document.getElementById('test'); 
div.insertAdjacentHTML('beforeend', html); 

Ich verwende diese Daten Test:

$scope.options = [ 
    [{ 
     "friendName": "Escobar", 
     "points": "200" 
    }, { 
     "friendName": "Pedro", 
     "points": "200" 
    }], 
    [{ 
     "friendName": "Cicero", 
     "points": "200" 
    }, { 
     "friendName": "Ciclano", 
     "points": "200" 
    }], 
    [{ 
     "friendName": "Jeremias", 
     "points": "200" 
    }, { 
     "friendName": "Boça", 
     "points": "200" 
    }], 
    [{ 
     "friendName": "Leite com pera", 
     "points": "200" 
    }, { 
     "friendName": "Rato borrachudo", 
     "points": "200" 
    }] 
    ]; 

Ich habe versucht, für 2 Tage, über diesen Fall und nichts erforscht. Ich bekomme auch keine Fehler.

Und ich brauche wirklich diese Zusammensetzung, weil jeder Dropdown dynamisch erstellt werden, diese Zahl dort wird sich dynamisch setted

Aber natürlich besser Vorschlag dann die Art und Weise im tut würde es geschätzt .

Answer 1

Ich aktualisiere diese Geige und ich werde den kompletten und netten Weg, dies zu tun, veröffentlichen. Aber für jetzt, das ist meine Antwort:

Html5

<div id="bob" ng-app ng-controller="MyCtrl"> 
    <select ng-model="ampm" ng-options="item.friendName for item in options[1]"></select> 
    AM/PM: {{ampm}} 
    <button ng-click="changeTopics()">Change</button> 
    <button ng-click="click()"></button> 

</div> 

Javascript

function MyCtrl($scope, $compile) { 
     var selectElement = angular.element("<select ng-model='ampm' ng-options='item.friendName for item in options[1]' class='ng-pristine ng-valid'></select>"); 

     var integer = 0; 

     $scope.click = function(){ 

    selectElement = angular.element("<select ng-model=\"test"+ integer +"\" ng-options=\"item.friendName for item in options[" + integer + "]\" class='ng-pristine ng-valid'></select>"); 

     htmlDiv = "<div id=\"test"+ integer +"\"></div>" 

     var string ='test'+integer; 

     console.log(integer); 

    div = document.getElementById('bob'); 

    div.insertAdjacentHTML('beforeend', htmlDiv); 

    angular.element(document.getElementById('test'+integer)).append(selectElement); 

    integer++; 

    $compile(selectElement)($scope); 
    } 

    function removeElement(element) { 
    element && element.parentNode && element.parentNode.removeChild(element); 
} 


    $scope.changeTopics = function(){ 

     removeElement(document.getElementById("test"+ (integer-1))); 
    delete $scope.options.splice(integer,1); 
     if(integer>0) 
     integer--; 
      console.log(integer); 

    } 
    $scope.ampm = 0; 
    $scope.options = [ 
     [{ 
      "friendName": "Escobar", 
      "points": "200" 
     }, { 
      "friendName": "Pedro", 
      "points": "200" 
     }], 
     [{ 
      "friendName": "Cicero", 
      "points": "200" 
     }, { 
      "friendName": "Ciclano", 
      "points": "200" 
     }], 
     [{ 
      "friendName": "Jeremias", 
      "points": "200" 
     }, { 
      "friendName": "Boça", 
      "points": "200" 
     }], 
     [{ 
      "friendName": "Leite com pera", 
      "points": "200" 
     }, { 
      "friendName": "Rato borrachudo", 
      "points": "200" 
     }] 
    ]; 

} 

Fiddle

ich Hilfe eines Freundes hatte die $ zu entdecken kompilieren. Vielen Dank.