在第一个由angularjs中选择select中的默认选项

时间:2014-12-21 21:47:27

标签: javascript angularjs html5

我一直在使用角度。我正在使用来自json的数据并将其推送到数组对象并显示在select元素的选项中。

我担心的是:选择默认选项后,只显示选项fron json数据。

最后,这是生成HTML的片段:

<select id="filterAssignedWorkgroupName_select" class="form-control ng-valid ng-scope selectPlaceholder ng-touched ng-dirty ng-valid-parse" ng-class="{'selectPlaceholder':options.placeholder}" ng-model="result[options.key]" ng-options="option.value as option.name for option in selectOptions" name="filterAssignedWorkgroupName" result="result" options="options" ng-change="onChangeFunction()">
  <!-- ngIf: options.placeholder -->
  <option value="0" label="BrodieBuild12_10">BrodieBuild12_10</option>
  <option value="1" label="Liberty ITyyy">Liberty ITyyy</option>
  <option value="2" label="Jon Break - Group">Jon Break - Group</option>
  <option value="3" label="Jon Break Dash - Group">Jon Break Dash - Group
  </option>
  <option value="4" label="Internet Team Tasks">Internet Team Tasks</option>
  <option value="5" label="Jon Test Group 12-2">Jon Test Group 12-2</option>
  <option ng-if="options.placeholder" value="" selected="" class="ng-binding ng-scope">Select Workgroups</option>
  <!-- end ngIf:
options.placeholder -->
</select>

我需要做些什么才能摆脱它?

以下是第一个选项并已选中。在运行时,这将是选项的顶部,但它显示在最后一个选项中。

  <option ng-if="options.placeholder" value="" selected=""
    class="ng-binding ng-scope">Select Workgroups</option><!-- end ngIf:
    options.placeholder --></select>

1 个答案:

答案 0 :(得分:0)

这是你在找什么?

鉴于以下$scope.items

$scope.items = [
    {id: 1, val: "foo"},
    {id: 2, val: "bar"},
    {id: 3, val: "baz"},
    // ...
    ];

以下视图将首先显示“选择项目”,一旦项目为sekect,它将从选项列表中删除它:

<select ng-model="selectedItem" ng-options="item as item.val for item in items">
  <option ng-if="!selectedItem" value="">Select item</option>
</select>

Plunker