3

オプションで角度ディレクティブng-selectedを使用する場合、選択を手動で変更するまで、バインドされたモデルは更新されません。これは設計どおりですか？

http://jsfiddle.net/PqHsL/1/

<div ng-app ng-init="colors=['red', 'yellow', 'blue']">
  <select ng-model=selectedElement>
    <option ng-repeat="color in colors" value="{{color}}" ng-selected="$last">{{color}}</option>
  </select>

  selectedElement: {{ selectedElement }}
</div>
4

1 に答える 1

4

設計どおりに機能しているかどうかはわかりません。

ng-selectedとng-modelがうまく合わない印象があります。（ng-selected APIページは、例の選択リストでng-modelを使用しないことに注意してください。）

これを回避する2つの方法があります。

  1. ng-selectedの設定に加えて、バインドされたモデルを設定します。ng-initはこれにも使用できます。
    ng-init="colors=['red', 'yellow', 'blue']; selectedElement=colors[colors.length-1]"

  2. バインドされたモデルを設定します。ng-selectedを使用せず、ng-optionsを使用します。
    ...ng-init as above...
    <select ng-model=selectedElement ng-options="color for color in colors">{{color}}</select>

フィドル。

解決策1には、奇妙な「空白」/空のオプションがあります。これは、何かを選択すると消えます。ソリューション2には空のオプションがなく、冗長性が低くなっています。（そうそう、私はソリューション2が好きです。）

オプションを事前選択するようにモデルを設定できる場合、ng-selectedのユースケースが何であるかわかりません。後でプログラムで選択を変更することもできます。フィドルのng-clickを参照してください。

于 2013-01-16T04:43:21.270 に答える