AngularJS Mehrfachauswahl Keine vorgewählten Optionen anzeigen

Question

Ich habe den Großteil des Vormittags an einer Lösung gearbeitet, wenn ich einer Entität auf meinem Formular mehrere Werte zuweisen muss.

Also, die Idee ist, ich habe eine Entität namens QualityData und diese Entität kann verschiedene MechanismIdentifiers haben.

Beste Lösung, die ich dachte, verwenden Sie eine multiple select.

alles funktioniert gut kombinieren diese beiden Lösungen:

AngularJS selecting multiple options

Get value when selected ng-option changes

ich das Array von ausgewählten Optionen zugreifen können, weisen es meine Einheit, etc ... Aber ich habe eine " Minor "Fallback, das ist, dass ich nicht die vorgewählten Optionen (die, die vom Server beim Laden von Daten für die Bearbeitung kommen würde) im Auswahlfeld hervorgehoben werden, wenn ein dynamischer Ansatz wie <option ng-repeat> oder ng-options verwendet wird, wird es funktioniert nur beim Hardcoding der opti ons. Ein weiterer Fehler ist, dass wenn ich mehr Werte hinzufügen möchte als diejenigen, die in dem vorausgewählten Array sind, löscht es alle Werte, die darin vorhanden sind, wenn ein dynamischer Ansatz verwendet wird, der beim Harkodieren gut funktioniert.

Das Markup:

<select multiple ng-change="showAlert(selectedValues)" ng-model="selectedValues"> 
        <!--ng-options="resDatasIdOfMechanism as resDatasIdOfMechanism.name for resDatasIdOfMechanism in resDatasIdOfMechanisms track by resDatasIdOfMechanism.id" value="resDatasIdOfMechanism.id">--> 

        <option value="1">{{resDatasIdOfMechanisms[0].name}}</option> 
        <option value="2">{{resDatasIdOfMechanisms[1].name}}</option> 
        <option value="3">{{resDatasIdOfMechanisms[2].name}}</option> 
       </select> 

Wenn ich versuche, um die Linie zu verwenden, die kommentiert wird, ist es, wenn die markierte Option nicht

Die Steuerung funktioniert:

$scope.selectedAlready = [{id:1, name:"Based on Antibiogram"}]; 
      $scope.selectedMechanisms=[]; 
      $scope.resDatasIdOfMechanisms = [{id:1,name:"Based on Antibiogram"}, {id:2,name:"Molecular"}, {id:3,name:"Genetic"}]; 
      $scope.selected = $scope.selectedAlready; 

      $scope.selectedValues = []; 

      $scope.$watch('selected', function(nowSelected){ 
       $scope.selectedValues = []; 
       if(! nowSelected){ 
        return; 
       } 
       angular.forEach(nowSelected, function(val){ 
        $scope.selectedValues.push(val.id.toString()); 
        console.log("look"); 
       }); 
      }); 

      $scope.showAlert=function(listOfMultipleChoices){ 
       //alert(object); 
      } 

EDIT hinzufügen jsfiddle Link, der funktioniert, aber ich habe immer noch keine Lösung zur ursprünglichen Frage gefunden: https://jsfiddle.net/StevenEvenSteven/ybapx09w/

Answer 1

In Ihrem Code ist ein Tippfehler enthalten.

ein Komma nach '$scope' in Ihrer Controller-Definition

fiddleApp.controller('myFiddle', ['$scope', function($scope) { 

Ich habe gegabelt Ihre jsfiddle und es funktioniert hinzufügen, wie Sie erwarten.