Comment définir l'option par défaut dans une zone de sélection AngularJS ?

Définir l'option par défaut dans la zone de sélection AngularJS

Dans AngularJS, les zones de sélection peuvent être facilement initialisées avec une option par défaut en utilisant diverses méthodes. Explorons comment y parvenir avec différentes approches :

Utiliser ng-init

Il s'agit d'un moyen simple de définir l'option par défaut. Ajoutez simplement une directive ng-init à la zone de sélection et attribuez la valeur par défaut souhaitée à la propriété du modèle. Par exemple :

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

Utilisation de la détection des changements

Cette méthode utilise le mécanisme de détection des changements d'AngularJS. En définissant une surveillance sur la propriété du modèle et en définissant manuellement la valeur par défaut si elle est initialement indéfinie, vous pouvez obtenir le résultat souhaité :

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

Utilisation de ng-if

Avec ng-if, vous pouvez restituer conditionnellement une option sélectionnée en fonction de la valeur du modèle 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>

Utilisation de la directive ng-selected

Cette directive vous permet de spécifier une condition qui, lorsqu'elle est évaluée à true, rendra l'option sélectionnée. Il peut être utilisé comme suit :

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

Choisissez la méthode qui correspond le mieux à vos besoins et profitez de la commodité de définir les options par défaut dans vos zones de sélection AngularJS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!