Heim  >  Artikel  >  Web-Frontend  >  Wie lege ich die Standardoption in einem AngularJS-Auswahlfeld fest?

Wie lege ich die Standardoption in einem AngularJS-Auswahlfeld fest?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-25 06:00:14241Durchsuche

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

Standardoption im AngularJS-Auswahlfeld festlegen

In AngularJS können Auswahlfelder mithilfe verschiedener Methoden einfach mit einer Standardoption initialisiert werden. Lassen Sie uns untersuchen, wie Sie dies mit verschiedenen Ansätzen erreichen können:

Mit ng-init

Dies ist eine einfache Möglichkeit, die Standardoption festzulegen. Fügen Sie einfach eine ng-init-Direktive zum Auswahlfeld hinzu und weisen Sie der Modelleigenschaft den gewünschten Standardwert zu. Zum Beispiel:

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

Änderungserkennung verwenden

Diese Methode nutzt den Änderungserkennungsmechanismus von AngularJS. Indem Sie eine Überwachung für die Modelleigenschaft festlegen und den Standardwert manuell festlegen, wenn dieser zunächst nicht definiert ist, können Sie das gewünschte Ergebnis erzielen:

<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>

Mit ng-if

Mit ng-if können Sie eine Option basierend auf dem Wert des Modells bedingt als ausgewählt darstellen Eigenschaft:

<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>

Verwendung der ng-selected-Direktive

Mit dieser Direktive können Sie eine Bedingung angeben, die, wenn sie als wahr ausgewertet wird, die Option ausgewählt macht. Es kann wie folgt verwendet werden:

<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>

Wählen Sie die Methode, die Ihren Anforderungen am besten entspricht, und genießen Sie den Komfort, Standardoptionen in Ihren AngularJS-Auswahlfeldern festzulegen.

Das obige ist der detaillierte Inhalt vonWie lege ich die Standardoption in einem AngularJS-Auswahlfeld fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn