根据下拉选项显示 div

Question

我有一个带有下拉菜单的组件，当前返回多个选项。我想添加一个功能，即选择选项'other'时，a div will show 。我不确定如何为 'other.'

的情况编写支票

目前的代码如下：

  <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

使用布尔变量。如果用户选择 "other"，则将变量设置为 true。然后将其用作显示或隐藏您的 div.

的值

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

然后在你的 html:

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

顺便说一下，如果您使用的是 Angular2+，则不能使用 ng-show。等效项可以是 [hidden] 或 *ngIf.

根据下拉选项显示 div

Show div based on drop down option

javascript

lookup

ng-show

angular2-template