angularjs - 如何使用 Angular JS 设置下拉列表控件的选定选项

Question

我正在使用 Angular JS，我需要使用 Angular JS 设置下拉列表控件的选定选项。如果这很荒谬，请原谅我，但我是 Angular JS 的新手

这是我的html的下拉列表控件

 <select ng-required="item.id==8 && item.quantity > 0" name="posterVariants"
   ng-show="item.id==8" ng-model="item.selectedVariant" 
   ng-change="calculateServicesSubTotal(item)"
   ng-options="v.name for v in variants | filter:{type:2}">
  </select>

填充后我得到

 <select ng-options="v.name for v in variants | filter:{type:2}" ng-change="calculateServicesSubTotal(item)"
ng-model="item.selectedVariant" ng-show="item.id==8" name="posterVariants"
ng-required="item.id==8 &amp;&amp; item.quantity &gt; 0" class="ng-pristine ng-valid ng-valid-required">
    <option value="?" selected="selected"></option>
    <option value="0">set of 6 traits</option>
    <option value="1">5 complete sets</option>
</select>

如何设置value="0"的控件被选中？

Answer 1

我希望我理解您的问题，但是 ng-model 指令在控件中的选定项和 item.selectedVariant 的值之间创建了双向绑定(bind)。这意味着更改 JavaScript 中的 item.selectedVariant 或更改控件中的值会更新另一个。如果 item.selectedVariant 的值为 0，则应选择该项目。

如果 variants 是对象数组，则 item.selectedVariant 必须设置为这些对象之一。我不知道您的范围内有哪些信息，但这里有一个示例:

JS:

$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
$scope.selectedOption = $scope.options[1];

HTML:

<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>

这将使“b”项目保持选中状态。