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'),
      ]

I am creating a data table in which there is a checkbox in the header, clicking on it will select all the checkboxes of the row. The issue is that checkboxcolumn is getting rendered in aria-label as well. The snippet below will tell you what is getting rendered:

<th  rowspan="1" colspan="1" style="width: 0px;" aria-label="
   <input type=&quot;checkbox&quot;
   ng-model=&quot;self.headerCheckBox&quot; ng-change=&quot;self.headerSelected()&quot;
   /> <span
   class=&quot;fa fa-check&quot;>
   ">
   <div >
      <label> <input type="checkbox" ng-model="self.headerCheckBox" ng-change="self.headerSelected()"> <span ></span>
      </label>
   </div>
</th>

You can see the content of the header and aria-label value are the same. How can I assign a different value to the aria-label? Help will be appreciated.

CodePudding user response：

As such there is no way to assign different value to aria-label. But you can add checkbox to the table header by using the below code. Here we will add the checkbox to the header after the table has been loaded.

Firstly we have defined an empty table header:

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'),
]

Now we will append the checkbox to the empty header:

    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)

This should work for you.