Zeige div basierend auf Drop-Down-Option

Question

Ich habe eine Komponente mit einer Dropdown-Liste gibt derzeit mehrere Optionen zurück. Ich möchte die Funktionalität hinzufügen, dass, wenn die Option "andere" gewählt wird, ein div wird zeigen. Ich bin mir nicht sicher, wie ich den Scheck für den Fall "Andere" schreiben soll. Hier

sind der Code so weit:

<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

Verwendung Booleschen Variablen. Wenn der Benutzer "Andere" auswählt, setzen Sie die Variable auf "Wahr". Dann benutze es als Wert, um dein div anzuzeigen oder zu verbergen.

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

Dann in Ihrem html:

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

By the way, wenn Sie Angular2 + verwenden, können Sie nicht ng-show verwenden. Das Äquivalent kann [hidden] oder *ngIf sein.