我试图显示卡片,因为输入类型是一个复选框,选择卡时,我能够获取用户选择的详细信息,我的要求是我需要要突出显示用户选择的卡。
例如,我需要突出显示检查复选框的卡,如果未选中复选框,我需要将其显示为卡。
lable+input[type=checkbox]:checked {
//some css code
}
<form [fromGropu]="form1">
<label for="{{i}}" *ngFor="let item of items" ;let i=index ">
<input type="checkbox " id="{{i}} " [value]="item " (change)="onchange() "/>
<div class="card rounded-0 ">
<div class="card-header ">{{item.header}}</div>
<diva class="card-body>{{item.desc}}</div>
<div class="card-footer">{{item.footer}}</div>
</div>
</div>
</label
</form>
但是,CSS不起作用,任何人都可以在此方面提供帮助
在检查输入后,Div.Card以下输入应应用CSS。
您的CSS应该像这样
input[type=checkbox]:checked + div.card{
color: red;
}
演示https://stackblitz.com/edit/angular-checked-input?file=src/app/app/app/app.component.css
为什么不只是使用使用ngClass
切换的类突出显示?请尝试此更改。
<form>
<label for="{{i}}" *ngFor="let item of items;let i =index" (click)="item.active = !item.active;"
[ngClass]="item.active ? 'active' : ''" style="display:block;">
<div class="card rounded-0">
<div class="card-header">{{item.header}}</div>
<div class="card-body">{{item.desc}}</div>
<div class="card-footer">{{item.footer}}</div>
</div>
</label>
</form>
注意:如果将数据发送到任何API,请删除此active
属性,以删除使用的数组。以下是一个工作示例!
stack Blitz demo