AngularJS 選択ボックスでデフォルトのオプションを設定するにはどうすればよいですか?-jsチュートリアル-php.cn

AngularJS 選択ボックスでデフォルトのオプションを設定するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-11-25 06:00:14

オリジナル

303 人が閲覧しました

How to Set the Default Option in an AngularJS Select Box?

AngularJS セレクトボックスのデフォルトオプションを設定する

AngularJS では、さまざまな方法を使用して、セレクトボックスをデフォルトオプションで簡単に初期化できます。さまざまなアプローチでこれを実現する方法を見てみましょう。

ng-init の使用

これは、デフォルトオプションを設定する簡単な方法です。 ng-init ディレクティブを選択ボックスに追加し、必要なデフォルト値をモデルプロパティに割り当てるだけです。例:

<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options">
</select>

ログイン後にコピー

変更検出の使用

このメソッドは、AngularJS の変更検出メカニズムを利用します。モデルプロパティに監視を設定し、初期値が未定義の場合はデフォルト値を手動で設定することで、目的の結果を得ることができます。

<select ng-model="somethingHere" ng-options="option.name for option in options">
</select>

<div ng-controller="MyCtrl">
  $scope.$watch('somethingHere', function(newVal) {
    if (!newVal) {
      $scope.somethingHere = options[0];
    }
  });
</div>

ログイン後にコピー

Using ng-if

ng-if を使用すると、モデルの値に基づいて選択されたオプションを条件付きでレンダリングできますproperty:

<select ng-model="somethingHere" ng-options="option.name for option in options">
  <option value="0" ng-if="!somethingHere">Something Cool</option>
  <option ng-repeat="option in options" value="{{option.value}}">{{option.name}}</option>
</select>

ログイン後にコピー

ng-selected ディレクティブの使用

このディレクティブを使用すると、true と評価された場合にオプションが選択される条件を指定できます。次のように使用できます:

<select ng-model="somethingHere" ng-options="option.name for option in options">
  <option value="0" ng-selected="!somethingHere">Something Cool</option>
  <option ng-repeat="option in options" value="{{option.value}}">{{option.name}}</option>
</select>

ログイン後にコピー

ニーズに最も適した方法を選択し、AngularJS 選択ボックスでデフォルトのオプションを設定する利便性をお楽しみください。

以上がAngularJS 選択ボックスでデフォルトのオプションを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。