0

我正在尝试创建以下 UI/UX 按钮：
.. [2015] [2016] [2017]

当前年份（在撰写本文时为 2017 年）默认为“选择”，但是，当用户单击“2015”时，应取消选择“2017”和“2016”（这些按钮是“互斥的”）

这些按钮是从一个为我提供多年数据的外部数据源生成的：

<button *ngFor="let year of styles.years"  type="button" name="button" class="btn btn-default" id="{{year.year}}">
  {{year.year}}
</button>

How can I create a system of buttons where one button is 'auto-selected', and when 'other' button is selected, it deselects the button that's actively selected, and sets the now clicked button to 'selected'?

4

2 回答 2

5

在组件中设置一个属性activeYear并通过将逻辑绑定到(click)按钮来控制它

<button *ngFor="let year of styles.years"  
    [ngClass]="{ active: activeYear === year }"
    (click)="activeYear = year.year"
    type="button" name="button" class="btn btn-default"  id="{{year.year}}">
    {{year.year}}
</button>

这是一个工作的 Plunker 展示了这一点

于 2017-02-15T19:26:30.817 回答
0

对于那些想使用多个类的人，比如我的例子：添加一个逗号，并添加一个新的样式：条件。

[ngClass]="{ selected: activeYear === year.year, 'btn-default': activeYear !== year.year}"

希望这对其他人也有帮助

于 2017-02-15T19:48:02.267 回答