Question

我有一个数据表，其中包含使用AngularJS制作的列过滤器。这是HTML：

<body ng-app="myApp" ng-controller="appController as Ctrl">
<table class="table table-bordered table-striped table-hover dataTable js-exportable" datatable="ng" dt-options="Ctrl.dtOptions" dt-columns="Ctrl.dtColumns">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>Name</th>
        </tr>
    </tfoot>
    <tbody>
        <tr ng-repeat="user in userList">
            <td>
                <input type="checkbox" id="user-{{ $index }}" ng-model="Ctrl.checkboxValue[$index]" ng-click="Ctrl.checkValue(user.id)" ng-true-value="{{user.id}}" />
                <label for="user-{{ $index }}"></label>
            </td>
            <td>
                <a href="#">
                    {{ ::user.name }}
                </a>
            </td>
        </tr>
    </tbody>
</table>

这是脚本：

    angular.module('myApp', ['ngAnimate', 'ngSanitize', 'datatables', 'datatables.columnfilter'])
.controller('appController', function($scope, $compile, DTOptionsBuilder, DTColumnBuilder){
    $scope.userList = [
        {
            id: '1',
            name: 'hello'
        },
        {
            id: '2',
            name: 'hi'
        }
    ];

    var vm = this;
    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withPaginationType('full_numbers')
        .withOption('createdRow', function (row, data, dataIndex) {
            $compile(angular.element(row).contents())($scope);
        })
        .withColumnFilter({
            aoColumns: [{

            }, {
                type: 'text',
                bRegex: true,
                bSmart: true
            }]
        });
    vm.dtColumns = [
        DTColumnBuilder.newColumn('').withTitle(''),
        DTColumnBuilder.newColumn('name').withTitle('Name'),
    ];

    vm.checkboxValue = [];
    vm.checkValue = function(id){
        console.log(id);
    }
});

的问题：

用户的id未传递给checkValue函数。因此，console.log为undefined。
假设如果选中第一个用户的复选框，则checkboxValue数组的值为[undefined: '1']。如果选中第二个用户的复选框，则checkboxValue数组的值将变为[undefined: '2']。只选中一个复选框。那是为什么？

演示：https://plnkr.co/edit/A3PJfBuwtpUQFAIz8hW7?p=preview

Answer 1

您使用冗余终止代码。看看this：

使用角度方式时，不能使用dt-column指令。实际上，模块将在承诺之后呈现数据表解决。因此，对于DataTables，它就像渲染静态表一样。

您实际上正在使用“角度方式”和dt-columns。您可以切换为使用DTColumnDefBuilder，但为什么在已有<thead>部分时定义列？只有在特定列上需要使用排序插件等时才有意义。和/或没有在标记中指定标题。

此外，当你用角度渲染时，没有必要$compile任何东西，实际上是非常错误的，角度已经做到了。所以

删除您的dt-columns或将其替换为dt-column-defs字面值
从$compile回拨

createdRow

然后它有效。我还会删除ng-true-value="{{user.id}}"属性。您想要一个表示复选框状态的数组，为什么要将状态设置为user.id而不是true或false？

vm.dtOptions = DTOptionsBuilder.newOptions()
  .withPaginationType('full_numbers')
  .withColumnFilter({
     aoColumns: [{
     }, {
       type: 'text',
       bRegex: true,
       bSmart: true
     }]
  });

和

<input type="checkbox" id="user-{{ $index }}" ng-model="Ctrl.checkboxValue[user.id]" ng-click="Ctrl.checkValue(user.id)" />

真的是你需要的一切。

forked plunkr - ＆gt;的 https://plnkr.co/edit/Z82oHi0m9Uj37LcdUSEW?p=preview

ng-click，ng-model在angularjs datatable中不起作用

1 个答案: