0

ng-options に関するこの特定の問題に行き詰まっています。オプションのグループ化を使用してリストボックスを作成しています:

<select ng-model="selTemplates" size="3" style="width: 150px" 
ng-options="template.Name group by template.Type for template in userTemplates">
</select>

グループの見出し (Type1 または Type2) をクリックすると、Chrome は最後に空のオプションを作成し、選択済みとしてマークします。ヘッダーがクリックされたときに「選択された」ものが見つからない可能性があるため、選択と関係があると思いますが、下部の空の値は望ましくありません。

こちらのフィドルを参照してください。どうすれば修正できますか?

(コードは IE9 で正常に動作しますが、フィドルが機能しない理由はわかりません)

4

3 に答える 3

0

一貫性のないブラウザの実装が理由のようです。オプション ヘッダーをクリックすると、Chrome は選択をクリアしますが、IE はクリアしません。そのため、Chrome は下部に新しい空の行を挿入します。

回避策として、最後に選択した値を変数に保存し、ユーザーがヘッダーをクリックした場合 (選択が null になる)、最後の選択を復元しています。フィドルを参照してください。正確にはきれいではありませんが、仕事を成し遂げます。

$scope.checkSelection = function() {
     if ($scope.selTemplates == null) {
        $scope.selTemplates = last;
    }
    else {
        last = $scope.selTemplates;
    }
}
于 2014-01-03T07:40:04.303 に答える