Question

当选中div旁边的复选框时，我正在尝试设置div的背景颜色。

复选框位于其自己的div中，我要更改颜色的div旁边。

我有一个复选框，可以切换所有其他复选框，如果我切换该复选框，它可以切换所有div的颜色，但是我也希望单独为相邻的div设置颜色。

这是我到目前为止所拥有的：

<div class="select-all-checkbox">
  <input type="checkbox" name="all" checked [checked]="isAllSelected" (change)="isSelected = !isSelected">
</div>

<div class="grid" *ngFor="let item of items; let i = index;">
  <div class="selection">
    <input type="checkbox" [checked]="isSelected">
  </div>
  <div class="selected-div" [style.background-color]="isSelected ? '#00B7A8':'' ">
  </div>
</div>

Answer 1

尝试使用ngClass指令。这是一个示例，其中假设有一些标记更改：

我假设每个项目都有一个isSelected属性。
我假设仅当选择了一个项目时，才应应用“ selected-div”类。
我取消了“全选”复选框，因为这似乎引起了一些混乱。

如果您弄清这些假设是否合理，我将更新此答案。

<div class="grid" *ngFor="let item of items; let i = index;">
  <div class="selection">
    <input type="checkbox" [checked]="item.isSelected">
  </div>
  <div [ngClass]="{'selected-div' : item.isSelected}">
  </div>
</div>

在CSS中：

.selected-div{
    background-color: #00B7A8;
}

Answer 2

因为isSelected是一个全局变量，未附加到您的任何物品上。

您需要一个商品属性，例如item.isSelected。

然后通过检查该成员的值来设置背景。

[style.background-color]="item.isSelected ? '#00B7A8':'' "

Answer 3

全选复选框的更改将更改列表中所有其他复选框的选中状态。因此，我们将通过在组件上调用toggleAllSelection方法来做到这一点。

此后，我们还将使用[(ngModel)]="item.selected"管理每个复选框的状态，这意味着列表中的每个项目都需要具有selected类型的boolean属性

您的标记需要更改，您的属性也需要更改

<div class="select-all-checkbox">
  <input 
    type="checkbox" 
    name="all" 
    [checked]="areAllSelected" 
    (change)="toggleAllSelection()">
</div>

<div 
  class="grid" 
  *ngFor="let item of items; let i = index;">
  <div class="selection">
    <input 
      type="checkbox" 
      [(ngModel)]="item.selected" 
      [checked]="item.selected">
  </div>
  <div 
    class="selected-div" 
    [style.backgroundColor]="item.selected ? 'red': 'white' ">
    Div {{ i + 1 }} Content
  </div>
</div>

在您的Component类中：

areAllSelected = false;

items = [
  { name: 'ITem 1', selected: false },
  { name: 'ITem 1', selected: false },
  { name: 'ITem 1', selected: false },
  { name: 'ITem 1', selected: false },
  { name: 'ITem 1', selected: false }
];

toggleAllSelection() {
  this.areAllSelected = !this.areAllSelected;
  this.items = this.items.map(item => ({ ...item, selected: this.areAllSelected}));
}

这是您推荐的Sample StackBlitz。

Answer 4

您可以将索引定义的模板引用与change事件结合使用，以通过复选框设置div颜色。

HTML

<div class="grid" *ngFor="let item of items; let i = index;">
  <div class="selection">
    <input #i type="checkbox" (change)="!i['checked']">
  </div>
  <div class="selected-div" [style.background-color]="i.checked ? '#00B7A8':'' ">
    test {{i.checked}}
  </div>
</div>

Answer 5

您的代码有点不正确。您应该使用backgroundColor而不是background-color

 <div class="selected-div" [style.backgroundColor]="isSelected ? '#00B7A8':'' ">
  </div>

Angular2：选中复选框时更改div的背景颜色

5 个答案: