0

我有这段代码允许用户按某个字段进行过滤：

<input type="text" class = "form-control" [(ngModel)]="siteFilter.site_name">
<button type="button"  class="btn btn-default">Address</button>
<button type="button"  class="btn btn-default">Site</button>
<button type="button"  class="btn btn-default">Phone</button>

在 component.ts 文件中：

siteFilter: any = { site_name: '', address:'', phone:'' };

我有 3 个按钮，应根据单击哪个按钮进行更改，ngModel.xxx以便按相应字段进行过滤。

我尝试使用一个包含相应字段的数组，单击按钮将选择索引，但它只是打印出字符串值而不是将其绑定到该模型。

4

1 回答 1

1

类似于您发布的代码

尽量保持原始结构：您的按钮可以更改过滤器类型，并且在单击时 - 清除其他过滤器。

模板

<input type="text" [(ngModel)]="siteFilter[filterType]">

<button type="button"  class="btn btn-default" (click)="changeFilter('address')">Address</button>
<button type="button"  class="btn btn-default" (click)="changeFilter('site_name')">Site</button>
<button type="button"  class="btn btn-default" (click)="changeFilter('phone')">Phone</button>

零件

siteFilter;
filterType = 'site_name';

constructor() {
  this.name = `Angular! v${VERSION.full}`
  this.emptySiteFilter();
}

changeFilter(newFilter) {
  this.emptySiteFilter();
  this.filterType = newFilter;
}

emptySiteFilter() {
  this.siteFilter = { site_name: '', address:'', phone:'' };
}

现场 plunker 演示

单选按钮替代

虽然如果是我，我会使用单选按钮和类型可以更改的单个对象。

模板

<input type="text" [(ngModel)]="filter.value" />

<input type="radio" name="filter" [(ngModel)]="filter.type" value="address"> Address
<input type="radio" name="filter" [(ngModel)]="filter.type" value="site_name"> Site
<input type="radio" name="filter" [(ngModel)]="filter.type" value="phone"> Phone

零件

filter = { type: 'site', value: '' }

使用单选按钮的替代 plunker

于 2017-07-24T23:15:00.703 回答