Question

我对angular 5还是陌生的。我需要添加下拉菜单的帮助，当我在下拉菜单中选择内容时，应该显示搜索框。

这是文本框代码。我需要将其放在下拉列表中，以便在我选择A时需要获取A的搜索文本框。当我选择模块时，应该为模块显示相同的文本框。

<div class="col-sm-1">
    <label for="A">A:</label>
</div>
<div class="col-sm-3">
    <input type="text" name="A" [(ngModel)]="A" class="form-control" id="A">
</div>
<div class="col-sm-1">
    <button type="submit" class="btn btn-primary" (click)="searchA()">search</button>
</div>
<div class="col-sm-1">
    <label for="module">MODULE:</label>
</div>
<div class="col-sm-3">
    <input type="text" name="module" [(ngModel)]="module" class="form-control" id="module">
</div>
<div class="col-sm-1">
    <button type="submit" class="btn btn-primary" (click)="searchModule()">search</button>
</div>
</div>

我要使用下拉菜单来显示单个搜索文本框，而不是两个搜索文本框。

Answer 1

这是完成此任务的简短示例。（为简洁起见，我忽略了引导程序）

有可能通过将我的下拉列表值声明为一个名为“ searchOption”的变量，然后将其用作每个搜索按钮的条件。

Select
<select [(ngModel)]="searchOption">
  <option value="A">A</option>
  <option value="module">module</option>
</select>

<button type="submit" class="btn btn-primary" (click)="searchA()" *ngIf="searchOption == 'A'">searchA</button>
<button type="submit" class="btn btn-primary" (click)="searchModule()" *ngIf="searchOption == 'module'">searchModule</button>

在angular5中带有文本框的下拉菜单

1 个答案: