首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用angular JS设置下拉列表控件的选定选项

如何使用angular JS设置下拉列表控件的选定选项
EN

Stack Overflow用户
提问于 2013-07-31 19:12:02
回答 6查看 520.8K关注 0票数 144

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

下面是我的html的下拉列表控件。

代码语言:javascript
复制
 <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>

在它被填充之后,我会得到

代码语言:javascript
复制
 <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"的控件设置为选中?

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2013-07-31 19:36:34

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

如果variants是一个对象数组,则必须将item.selectedVariant设置为其中一个对象。我不知道您的作用域中有哪些信息,但这里有一个示例:

JS:

代码语言:javascript
复制
$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
$scope.selectedOption = $scope.options[1];

HTML:

代码语言:javascript
复制
<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>

这将使"b“项处于选中状态。

票数 195
EN

Stack Overflow用户

发布于 2013-07-31 19:38:25

如果将值0分配给item.selectedVariant,则会自动选择该值。在http://docs.angularjs.org/api/ng.directive:select上查看sample,它通过简单地分配$scope.color='red'来选择默认的红色。

票数 7
EN

Stack Overflow用户

发布于 2015-10-11 17:45:42

我看到这里已经写了很好的答案,但有时用其他形式写同样的答案会很有帮助

代码语言:javascript
复制
<div ng-app ng-controller="MyCtrl">
  <select ng-model="referral.organization" ng-options="c for c in organizations"></select>
</div>

<script type='text/javascript'>
  function MyCtrl($scope) {
    $scope.organizations = ['a', 'b', 'c', 'd', 'e'];
    $scope.referral = {
      organization: $scope.organizations[2]
    };
  }
</script>
票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17968760

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档