1

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/

4

1 に答える 1

6

次のAngular操作と関係があるのではないかと思います。

リストが最初に表示されるとき、AngularはこのようなオプションをHTMLに追加します。

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

$ scope.template.observations [$ index] .observation.idは最初は有効なオプション/値に設定されていないため、次のようになります。

有効な選択肢を選択した後、そのオプションは魔法のように消えます、そして多分それはどういうわけかiOSを混乱させています...

この1つのオプションを追加すると、役立つかどうかを確認してください（特別なオプションが生成されないようにします）。

<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>
于 2013-01-05T05:17:54.620 に答える