如何在 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>

使用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中文網其他相關文章！