Afficher div basé sur l'option déroulante

Question

J'ai un composant avec un menu déroulant qui retourne actuellement plusieurs options. Je veux ajouter la fonctionnalité que lorsque l'option «autre» est choisi, un div afficher. Je ne suis pas sûr de savoir comment écrire le chèque pour le cas de «l'autre».

Voici le code à ce jour:

<div class="p-2 col"> 
 
    <select class="form-control w-100" type="checkbox" formControlName="paidToId"> 
 
     <option *ngFor="let lookupItem of leHudItemInfo.availablePaidTos" [ngValue]="lookupItem.id"> 
 
     {{lookupItem.name}} 
 
     
 
     //this returns the options, but how can I add a flag for only the string of "other" 
 
     </option> 
 
    </select> 
 
    </div>

<div class="showOther" ng-show="paidToOptions=='other'"> 
 
     </div>

HTML: <div class="" ng-show="selection=='other'"> </div>

Answer 1

Utiliser des variables booléennes. Si l'utilisateur sélectionne "other", définissez la variable sur true. Ensuite, utilisez-le comme une valeur pour afficher ou masquer votre div.

var otherOption = true; //set the value using the dropdown 

Puis dans votre code html:

<div class="showOther" [hidden]={!otherOption}></div> 

Par ailleurs, si vous utilisez Angular2 +, vous ne pouvez pas utiliser ng-show. L'équivalent peut être [hidden] ou *ngIf.