ng-click、ng-model 在 angularjs 数据表中不起作用

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 :

When using the angular way, you CANNOT use the dt-column directive. Indeed, the module will render the datatable after the promise is resolved. So for DataTables, it's like rendering a static table.

您实际上是在使用 "angular way" 和 dt-columns。您可以切换为使用 DTColumnDefBuilder，但为什么在已经有 <thead> 部分时定义列？仅当您需要在特定列上使用排序插件等时才有意义。和/或不是在标记中指定 header。

此外，当您使用 angular 渲染时，没有必要 $compile 任何东西，事实上这是非常错误的，angular 已经做到了。所以

删除您的 dt-columns 或将其替换为 dt-column-defs 文字
从 createdRow 回调中删除您的 $compile

然后就可以了。我还会删除 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 -> https://plnkr.co/edit/Z82oHi0m9Uj37LcdUSEW?p=preview

ng-click、ng-model 在 angularjs 数据表中不起作用

ng-click, ng-model not working in angularjs datatable

datatables

angularjs

angular-datatables