从按钮按下动态更改ngModel - 角度

Question

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

<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以便按相应字段进行过滤。

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

Answer 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:'' };
}

现场拼接器演示

单选按钮替代

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

模板

<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: '' }

使用单选按钮的替代弹道器