let checkboxColumn = `<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>`; 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'), ]Estoy creando una tabla de datos en la que hay una casilla de verificación en el encabezado, al hacer clic en ella se seleccionarán todas las casillas de verificación de la fila. El problema es que checkboxcolumn también se representa en aria-label. El siguiente fragmento le dirá lo que se está procesando:
<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>Puede ver que el contenido del encabezado y el valor de la etiqueta aria son iguales. ¿Cómo puedo asignar un valor diferente a la etiqueta aria? La ayuda será apreciada.
Como tal, no hay forma de asignar un valor diferente a aria-label. Pero puede agregar una casilla de verificación al encabezado de la tabla usando el siguiente código. Aquí agregaremos la casilla de verificación al encabezado después de que se haya cargado la tabla.
En primer lugar, hemos definido un encabezado de tabla vacío:
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'), ]Ahora agregaremos la casilla de verificación al encabezado vacío:
var checkbox_add = `<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>`; $timeout( function () { let element = document.getElementsByClassName("select-policy-header")[0]; angular.element(element).append($compile(checkbox_add)($scope)); }, 1000)Esto debería funcionar para usted.