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

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

Mary-Kate Olsen
Freigeben: 2024-11-25 06:00:14
Original
305 Leute haben es durchsucht

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>
Nach dem Login kopieren

Ä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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage