angularjs - ng-selected はどのように機能しますか?

Question

ここにスニペットがあります。予想通りQ2が選ばれました。

<select name="quarter" ng-model="Quarter" >
    <option value="1" >Q1</option>
    <option value="2" ng-selected="Quarter=='Q1'">Q2</option>
    <option value="3">Q3</option>
    <option value="4">4</option>
</select>

' に変更'Q1'する'Q2と、期待どおりに何も選択されません。今ng-selected="Quarter=='Q1'"、私が削除するまでQ1を選択しないでくださいng-selected="Quarter=='Q2"

ｗｗｗこれはどのように機能すると思われますか？

score 21 · Accepted Answer

オプション要素に ng-selected を配置すると、ng-selected 値が true の場合にオプションが選択されます。あなたの場合、四半期がQ1に等しい場合、オプションQ2が選択されます。

Quarter で渡された値を選択する場合は、select 要素に ng-selected を配置する必要があります。

<select name="quarter" ng-model="Quarter" ng-selected="Quarter"
        ng-options="Quarter for Quarter in Quarters" >
    {{Quarter}}
</select>

select ディレクティブのドキュメントを参照してください。

score 5 · Accepted Answer

<select ng-model="hour">
    <option ng-selected="hour == $index" ng-repeat="h in (((b=[]).length=24)&&b) track by $index" ng-bind="$index">{{h}}</option>
</select>

24時間選択したい場合は、これを行うことができます。

score 4 · Accepted Answer

このような：

<body ng-controller="MainCtrl">
  {{referenceNumber}}
    <select ng-model="referenceNumber">
            <option ng-selected="!referenceNumber">Default</option>
            <option ng-repeat="number in numbers track by $index" ng-value="number">{{number}}</option>
        </select>
  </body>

「ngSelected の主な理由の 1 つは、モデルが正しく設定されていないかどうかに応じてデフォルト値を設定することだと思います。」joshkurz が 2014 年 3 月 3 日にコメントしました

したがって、正しい方法は、あなたの場合にのみ ng-model に依存することです。あなたがやろうとしていることを行う正しい方法（オプションを事前に選択する）は次のとおりです：

<select ng-model="purchase.product" name="purchase.product" class="u-full-width" ng-options="product.id as product.name for product in products"></select>

参照：

angularjs - ng-selected はどのように機能しますか?

4 に答える 4

Related

Reference