let checkboxColumn = `<div >
<label> <input type="checkbox"
ng-model="self.headerCheckBox" ng-change="self.headerSelected()"
/> <span
></span>
</label>
</div>`;
self.dtColumns = [
DTColumnBuilder.newColumn("select").withTitle(checkboxColumn).notSortable(),
DTColumnBuilder.newColumn("type").withTitle("Type").notSortable().withClass('min-width-100'),
DTColumnBuilder.newColumn("ip").withTitle("Value").notSortable().withClass('min-width-250'),
]我正在創建一個資料表，其中標題中有一個復選框，單擊它將選擇該行的所有復選框。問題是checkboxcolumn也在 aria-label 中呈現。下面的代碼片段將告訴您正在渲染的內容：
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;" aria-label="
<input type="checkbox"
ng-model="self.headerCheckBox" ng-change="self.headerSelected()"
/> <span
class="fa fa-check">
">
<div class="checkbox c-checkbox">
<label> <input type="checkbox" ng-model="self.headerCheckBox" ng-change="self.headerSelected()"> <span class="fa fa-check"></span>
</label>
</div>
</th>可以看到 header 的內容和 aria-label 的值是一樣的。如何為 aria-label 分配不同的值？幫助將不勝感激。
uj5u.com熱心網友回復：
因此，無法為 aria-label 分配不同的值。但是您可以使用以下代碼將復選框添加到表頭。在這里，我們將在加載表格后將復選框添加到標題中。
首先我們定義了一個空表頭：
self.dtColumns = [
DTColumnBuilder.newColumn("select").withTitle("").notSortable().withClass('select-policy-header'),
DTColumnBuilder.newColumn("type").withTitle("Type").notSortable().withClass('min-width-100'),
DTColumnBuilder.newColumn("ip").withTitle("Value").notSortable().withClass('min-width-250'),
]現在我們將復選框附加到空標題：
var checkbox_add = `<div >
<label> <input type="checkbox"
ng-model="self.headerCheckBox" ng-change="self.headerSelected()"
/> <span
></span>
</label>
</div>`;
$timeout(
function () {
let element = document.getElementsByClassName("select-policy-header")[0];
angular.element(element).append($compile(checkbox_add)($scope));
}, 1000)這應該適合你。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/427839.html