Question

我是angular的新手。我正在为select做一个简单的演示，我将根据所选的当前值添加新的select。对于选项和模型，我也是动态值。我无法获得所选值，请帮忙。

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

这里的模型名称是pet，而我在$ scope.pet中给出了undefined。

Answer 1

如果您想使用$ scope.pet作为模型，那么您需要在ng-model指令中使用它，如下所示：

（ng-model是指定选择值的位置）。

<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 =＆＃34; Cat＆＃34 ;;

你的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-model值表示你的方式，Angular将值赋给＆＃34;模型＆＃34; $ scope.selects对象的属性。如果您检查$ scope.selects（angular Batarang或类似的chrome插件。）数组，您将在其中一个对象的model属性中看到您将拥有所选的正确值，但您只是将它分配给错误的位置。

如果您需要多个选择和模型，您将使用现有对象模型属性或类似的东西，在ng模型中使用a.model，然后在ng-change中，您将传递＆＃34;索引＆＃34; ＆＃34; a＆＃34;选择。

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

所以，当你的＆＃34; callme＆＃34;函数被调用，你可以通过执行以下操作来查看选择的值。

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

}

获得角度js中的选定值

1 个答案: