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

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 サイトの他の関連記事を参照してください。