獲取角度js中的選定值

Question

我是angular.I的新手，我正在做一個簡單的演示，其中我將根據當前選定的值添加新的選擇。我很喜歡選項和模型的動態價值。我無法獲得選定的值，請幫助。

HTML代碼放在這裏：

<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代碼到這裏

$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"}]}); 
} 

這裏的型號名稱是寵我雖然$ scope.pet這是給不確定的。

Answer 1

如果您想使用$ scope.pet爲你的模型，那麼你需要使用它的NG-模式指令是這樣的：

（NG-模型就是選擇價值被分配）。

<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> 

此外，你應該確保你的$ scope.pet變量是在渲染頁面之前聲明的。您可以爲$ scope.pet賦值，讓您的下拉菜單預先填充... $ scope.pet =「Cat」;

你的js代碼應該是這個樣子：

$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"}]}); 
} 

您有這方面現在a.model爲您的NG-模型值表達的方式，角度值分配給的「模型」屬性$ scope.selects對象。如果您檢查$ scope.selects（角度Batarang或類似的Chrome插件）數組，您將在其中一個對象的model屬性中看到您將具有您選擇的正確值，但您只是將它分配給錯誤的位置。

如果您需要多個選擇和模型，您可以使用現有對象模型屬性或類似的模型，在您的ng模型中使用a.model，然後在ng-change中，您將傳遞「index」選擇「a」。

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

因此，當您的「callme」函數被調用時，您將能夠通過執行以下操作來查看選擇的值。

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

}