javascript - 更改复选框选中角度 4 上整行的颜色
问题描述
如何使整行可单击,以及单击复选框时如何更改行颜色?
这是我的 html 文件
<section class="others">
<div class="sub-header">Others</div>
<p class="text-center" *ngIf="otherTests.length === 0">No Tests Available</p>
<app-custom-accordion [closeOthers]="true">
<ngb-panel [disabled]="true" *ngFor="let testPanel of otherTests" id=". {{testPanel.Id}}" [title]="testPanel.Name">
<ng-template ngbPanelTitle>
<div class="action-items">
<span class="material-icons fav" [class.favorited]="testPanel.Favorite" (click)="onFavoriteClick(testPanel)"></span>
<span class="icon-set" [ngClass]="{'same-day-2x': isSameDay(testPanel.Code), 'next-day-2x': isNextDay(testPanel.Code)}"></span>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" [name]="testPanel.Id + '-' + testPanel.Moniker" [ngModel]="panelIds.indexOf(testPanel.Id) > -1"
(ngModelChange)="onPanelCheckboxUpdate($event, testPanel)" [id]="testPanel.Id + '-' + testPanel.Moniker">
<span class="custom-control-indicator"></span>
</label>
</div>
</ng-template>
</ngb-panel>
这是我用于复选框更改的 Ts 文件
onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
let testPanelIds = panel.Tests.map(test => test.Id);
// Wipe any duplicates
this.panelIds = this.panelIds.filter(
panelId => panel.Id !== panelId && testPanelIds.indexOf(panelId) === -1
);
this.selectedPanels = this.selectedPanels.filter(
selectedPanel =>
panel.Id !== selectedPanel.Id &&
testPanelIds.indexOf(selectedPanel.Id) === -1
);
if ($event) {
this.panelIds.push(panel.Id);
this.selectedPanels.push(panel);
}
this.updateSession();
}
这是我的 app-custom-accordion 组件
<div class="card">
<ng-template ngFor let-panel [ngForOf]="panels">
<div role="tab" id="{{panel.id}}-header" [class]="'card-header ' +
(panel.type ? 'card-' + panel.type: type ? 'card-' + type : '')"
[class.active]="isOpen(panel.id)">
<a href (click)="!!toggle(panel.id)" [attr.tabindex]=" .
(panel.disabled
? '-1' : null)" [attr.aria-expanded]="isOpen(panel.id)"
[attr.aria-controls]="(isOpen(panel.id) ? panel.id : null)"
[attr.aria-disabled]="panel.disabled">{{panel.title}}</a>
<ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-
template>
<!-- expansion arrows -->
<div *ngIf="arrowExpand" (click)="toggle(panel.id)" [attr.aria-
expanded]="isOpen(panel.id)">
<span class="material-icons expand"></span>
</div>
</div>
<div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'" class="card-block" *ngIf="isOpen(panel.id) && panel.contentTpl">
<ng-template [ngTemplateOutlet]="panel.contentTpl?.templateRef"></ng-template>
</div>
</ng-template>
</div>
在单击复选框时,如何更改整行的颜色,例如选择复选框时,整个行应该是黑暗的或任何其他行,什么时候未选中的何时应使用以前的颜色,即白色可以帮忙吗?谢谢
解决方案
推荐阅读
- amazon-web-services - 重启后无法通过 SSH 连接到 EC2 服务器
- html - 如何在模态中将 div 放置在表格右下角旁边?
- graphite - Graphite - 从多个查询中创建查询
- docker - 有没有办法通过隧道将docker中的veth中继到远程主机?
- angular - 如何以角度更改ngbTooltip中的工具提示值
- swift - Swift 并发:`async let` 在模拟器上的奇怪行为
- pdf.js - pdf.js 2.11.338:以只读方式显示填写的 AcroForms?
- jquery - jQuery Mobile Popup 在滚动时不断重新定位
- ethereum - 如何将参数作为字节传递给solidity
- javascript - React/Node.js:无法从前端和数据库中删除条目