ios - Angularjs 1.0.3 嵌套在 ng-repeat 中的选择列表显示在 iOS 上选择的错误项目

Question

使用嵌套在 ng-repeat 中的 ng-option 进行选择会导致选择列表在 iOS 上出现奇怪的行为。第一次单击添加并从列表中选择一个项目时，选项列表关闭后显示的项目是所选项目下方的项目。如果您检查旁边的必填字段或再次打开选项列表，则会更正显示的项目。这将适用于桌面浏览器，您必须使用 iOS 设备才能看到问题。

<div ng-app>
<div ng-controller="TemplateDetailCtrl">
<button ng-click="addObs()">add</button>
<br/>
<span ng-repeat="obs in template.observations">
    <select ng-model="template.observations[$index].observation.id" ng-options="obsOption.id as obsOption.name for obsOption in options | orderBy:'name'">
    </select>
    <input type="checkbox" ng-model="template.observations[$index].required"/>Required
    <button class='btn' ng-click="removeObs($index)">Remove</button>
    <br/>
</span>

</div>
</div>

function TemplateDetailCtrl($scope) {
$scope.message = 'Not Ready';
$scope.options = [{id: 1,name: 'Opt1'},{id: 2,name: 'Opt2'},{id: 3,name: 'Opt3'},{id: 4,name: 'Opt4'},
{id: 5,name: 'Opt5'},{id: 6, name: 'Opt6'},{id: 7,name: 'Opt7'},{id: 8,name: 'Opt8'},{id: 9, name: 'Opt9'}];
$scope.template = {};


$scope.addObs = function() {
   $scope.message = 'changed...';

  if (!$scope.template.observations) {
        $scope.template.observations = [];
                  }

    $scope.template.observations.push({
        observation: {},
        required: 'false'
    });
};

$scope.removeObs = function(idx) {
    var observations = $scope.template.observations;
    observations.splice(idx, 1);
};


}

http://jsfiddle.net/48T2n/5/

Answer 1

我猜它可能与以下 Angular 操作有关:

当列表最初显示时，Angular 会在 HTML 中添加这样的选项，

<option value="?" selected="selected"></option>

因为 $scope.template.observations[$index].observation.id 最初没有设置为有效的选项/值:

选择一个有效的选项后，该选项会神奇地消失，也许这会以某种方式让 iOS 感到困惑......

看看添加这个选项是否有帮助(它可以防止生成该特殊选项):

<select ng-model="template.observations[$index].observation.id" ng-options="obsOption.id as obsOption.name for obsOption in options | orderBy:'name'">
    <option style="display:none" value=""></option>
</select>