Question

在我的Angularjs应用中，我正在创建一个动态表，该表还有一个复选框列，该列的标题也是复选框，用于selectAll目的。

以下是表格创建的代码

        var dt = this;
        // register function to call from dynamic html
        dt.selectAll_Clicked = selectAll_Clicked;

        var titleHtml = '';

        titleHtml = '<input id="chkboxSelectAll" onClick="selectAll_Clicked()" type="checkbox">';

        $('#dtData').DataTable().clear().destroy();
        $("#invDiv").empty();
        $("#invDiv").html("<table id='dtData' name='dtData' dt-options='dtOptions' dt-columns='dtColumns' class='table table-striped table-bordered'></table>");
        var header = data[0],
            dtColumns = [];

        //create columns based on first row in dataset
        for (var key in header) {

            dtColumns.push(DTColumnBuilder.newColumn(key).withTitle(key));

        }

        dtColumns.push(DTColumnBuilder.newColumn(null).withTitle(titleHtml)
            .renderWith(function(data, type, full, meta) {

                return '<input type="checkbox" id="chkboxSelect' + data.Id + '" name="SelectClient" >';


            }));

        $scope.dtColumns = dtColumns;

        //create options
        $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('data', data)
            .withOption('dataSrc', '');

        //initialize the dataTable
        angular.element('#dtData').attr('datatable', '');
        $compile(angular.element('#dtData'))($scope);

在selectAll_Clicked函数中，我获取所有复选框的Id（s）并手动将其checked属性更新为true / false。

function selectAll_Clicked() {
    if ($scope.lstSelectedData != null && $scope.lstSelectedData.length === $scope.lstData.length) {
            $scope.lstSelectedData = [];
            for (obj in $scope.lstData) {
                document.getElementById("chkboxSelect" + $scope.lstData[obj].Id).checked = false;

            }

        } else {
            $scope.lstSelectedData = [];
            for (obj in $scope.lstData) {
                console.log(document.getElementById("chkboxSelect" + $scope.lstData[obj].Id));
                if (document.getElementById("chkboxSelect" + $scope.lstData[obj].Id).disabled == false) {
                    document.getElementById("chkboxSelect" + $scope.lstData[obj].Id).checked = true;
                    $scope.lstSelectedData.push($scope.lstData[obj].Id);
                }
            }


        }
}

它的可见行工作正常，但对于不可见的行，我面临问题

未捕获的TypeError：无法读取null
的属性“已禁用”

对于不可见的行，

document.getElementById返回null。

我尝试了this替代解决方案。它返回单元格的定义，但不允许更新该单元格的属性。

有没有其他方法可以做到这一点？任何形式的帮助将不胜感激。

document.getElementById为angularjs datatable中的不可见行返回null

0 个答案: