ng-click，ng-model 在 angularjs 数据表中不起作用答案

【问题标题】：ng-click, ng-model not working in angularjs datatableng-click，ng-model 在 angularjs 数据表中不起作用
【发布时间】：2018-05-16 07:07:55
【问题描述】：

我有一个使用 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

【问题讨论】：

第一个问题是正常的，应该使用ng-change。它的input 字段，ng-click 不会工作。你能创建一个第二期的 plunkr 并分享演示网址
plnkr.co/edit/A3PJfBuwtpUQFAIz8hW7?p=preview 。抱歉，拖了这么久。

标签： angularjs datatables angular-datatables

【解决方案1】：

你用冗余杀死你的代码。看this：

使用角度方式时，不能使用 dt-column 指令。实际上，该模块将在 promise 完成后呈现数据表解决。所以对于 DataTables，它就像渲染一个静态表。

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

此外，当您使用 Angular 进行渲染时，不需要 $compile 任何东西，事实上这是非常错误的，Angular 已经这样做了。所以

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

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

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

【讨论】：