使用 ng-repeat 时选择值不显示默认值

Question

为什么使用 ng-options 选择标签可以通过显示默认选择值正常工作，但如果我使用 ng-repeat 则同样无法正常工作。

这里是代码，

  <!-- this works-->

<select class="form-control" ng-model="selectValue" ng-options="option.id as option.name for option in availableOptions"> 
</select>

<!-- this also works-->

    <select ng-model="selectValue">
       <option ng-repeat="options in availableOptions" value="{{options.id}}" ng-selected="selectValue === options.id">{{options.name}}</option>
    </select> 

<!-- this doesnt works-->

<select ng-model="selectValue">
   <option ng-repeat="options in availableOptions" ng-value="options.id" ng-selected="selectValue === options.id">{{options.name}}</option>
</select> 

在 app.js 中，

$scope.selectValue="2";
    $scope.availableOptions = [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ];

虽然 HTML 显示了 selected 属性，但它仍然没有在视图中正确呈现

这是相同的 plunker link

Answer 1

虽然在页面上设置下拉菜单的正确方法应该是使用ng-options，但您可以更改下面的标记以使其与ng-repeat 版本一起使用。

标记

<select ng-model="selectValue">
   <option ng-repeat="options in availableOptions" value="{{options.id}}">
     {{options.name}}
   </option>
</select>

Working Plunkr