Question

如何在多个按钮上切换背景颜色。（参考图像）

我有一组按钮。一旦用户单击任何按钮，它将更改背景颜色，如果再次单击同一按钮的其他按钮，则第一个单击的按钮将重置为原始颜色并更改第二个单击按钮。

代码

<span class="input-group-btn">

                    <button
                      class="btn btn-sm btn-primary mr-2"
                      (click)="selectToday('approved')"
                    >
                      Select Today
                    </button>
                    <button
                      class="btn btn-sm btn-primary mr-2"
                      (click)="selectWeek('approved')"
                    >
                      To Current Week
                    </button>
                    <button
                      class="btn btn-sm btn-primary mr-2"
                      (click)="selectMonth('approved')"
                    >
                      To Current Month
                    </button>
                    <button
                      class="btn btn-sm btn-primary mr-2"
                      (click)="AllTime('approved')"
                    >
                      All Time
                    </button>
                  </span>

谁能给我提示如何将类彼此绑定

image

Answer 1

为每个按钮提供索引或ID，并在单击时提供索引

(click)="enableDisableRule(2)"

在您的ts中，保存索引：

enableDisableRule(selectedIndex:number){
   ...
   if(this.selectedIndex = selectedIndex){
      this.selectedIndex = null;
   } else{
      this.selectedIndex = selectedIndex;
   }
}

然后在您的html中，根据selectedIndex更新您的按钮：

[style.background-color]="selectedIndex === 2 ? 'green' : 'red'"

或者本着这种精神。

Answer 2

您可以像这样将其动态化：

Working Demo

TS：

selected = null

buttons = ["Selecct Today", "Current Week", "Current Week", "All Time"];

模板：

<ng-container *ngFor="let btn of buttons;let i=index">
    <button [style.background-color]="selected == i ? 'green' : 'red'" (click)=" selected == i? selected = null:selected = i">
       {{btn}}
    </button>
</ng-container>

要在取消选择已选择的btn时更改下一个按钮的颜色，请尝试以下操作：

<ng-container *ngFor="let btn of buttons;let i=index">
    <button [style.background-color]="selected == i ? 'green' : 'red'" (click)=" selected == i? selected = i + 1:selected = i">
    {{btn}}
  </button>
</ng-container>

Answer 3

您可以使用单选按钮并自定义其显示样式，而不必直接使用Button。我相信我会解决您的问题的。只需参考此链接：

Convert Radio button to Button

切换多个按钮上的颜色

3 个答案: