Get ausgewählten Wert in Winkel js

Question

Ich bin neu zu angular.I machte eine einfache Demo für auswählen, in dem ich neue Auswahl nach aktuellen Wert ausgewählt wird. Ich bin ein dynamischer Wert für Optionen und auch für das Modell. Ich bin nicht in der Lage, den ausgewählten Wert zu erhalten, bitte helfen Sie.

HTML-Code geht hier:

<md-input-container ng-repeat="a in selects" class="md-block" style="margin-top:20px;"> 
     <label>{{a.label}}</label> 
     <md-select required ng-model="a.model" ng-change="callme()" flex="40"> 
     <md-option ng-model="a.model" ng-repeat="optionValue in a.options" ng-value="optionValue.option"> 
      {{optionValue.option}} 
     </md-option> 
     </md-select> 
     <div class="errors" ng-messages="petApp.favoriteColor.$error"> 
      <div ng-message="required"> You need to select a option</div> 
     </div> 
    </md-input-container> 

JS-Code geht hier

$scope.selects = [{label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]}]; 

$scope.callme = function(){ 
    console.log($scope.pet); 
    $scope.selects.push({label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]}); 
} 

Hier wird der Modellname ist Haustier während ich $ do scope.pet es undefined gibt.

Answer 1

Wenn Sie $ scope.pet als Modell verwenden möchten, dann müssen Sie es im ng-Modell Richtlinie wie folgt verwenden:

(ng-Modell ist, wo der Wert der Auswahl wird zugewiesen).

<md-input-container ng-repeat="a in selects" class="md-block" style="margin-top:20px;"> 
     <label>{{a.label}}</label> 
     <md-select required ng-model="pet" ng-change="callme()" flex="40"> 
     <md-option ng-repeat="optionValue in a.options" ng-value="optionValue.option"> 
      {{optionValue.option}} 
     </md-option> 
     </md-select> 
     <div class="errors" ng-messages="petApp.favoriteColor.$error"> 
      <div ng-message="required"> You need to select a option</div> 
     </div> 
    </md-input-container> 

Auch sollten Sie sicherstellen, dass Ihre $ scope.pet-Variable vor dem Rendern der Seite deklariert wird. Sie können $ scope.pet einen Wert zuweisen, damit Ihr Dropdown-Feld vorbelegt ist ... $ scope.pet = "Cat";

Ihre js Code wie folgt aussehen sollte:

$scope.pet = ""; // or you may assign pet a value if you like 

$scope.selects = [{label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]}]; 

$scope.callme = function(){ 
    console.log($scope.pet); 
    $scope.selects.push({label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]}); 
} 

Die Art und Weise zum Ausdruck gebracht haben jetzt mit a.model als ng-Modellwert, ordnet Angular den Wert auf das „Modell“ Eigenschaft der $ scope.wählt Objekte aus. Wenn Sie das Array $ scope.selects (eckiges Batarang oder ähnliches chrome-plugin.) Untersuchen, werden Sie in der Modelleigenschaft eines der Objekte sehen, dass Sie den korrekten Wert haben, den Sie ausgewählt haben, aber Sie ordnen es nur der falschen Stelle zu.

Für den Fall, dass Sie mehrere Selects und Modelle benötigen würden Sie Ihre vorhandenen Objekte Modelleigenschaft oder etwas ähnliches, a.model in Ihrem ng-Modell verwenden, und dann in ng-change übergeben Sie den "Index" von "a" in wählt aus.

<md-select required ng-model="a.model" ng-change="callme($index)" flex="40"> 

so, wenn Ihre „callme“ -Funktion Sie wäre in der Lage aufgerufen wird, indem Sie die folgenden den Wert der Auswahl zu sehen.

$scope.callme = function(index){ 
    console.log($scope.selects[index].model); 

}