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

Question

I have a datatable with column filters made with AngularJS. Here is the 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>

Here's the script:

    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);
    }
});

Issues:

id of the user does not get passed to checkValue function. Hence, the console.log is undefined.
Suppose if the checkbox of 1st user is checked, the value of checkboxValue array is [undefined: '1']. If checkbox of 2nd user is checked the value of checkboxValue array becomes [undefined: '2']. Only one checkbox gets checked. Why is that?

Demo: https://plnkr.co/edit/A3PJfBuwtpUQFAIz8hW7?p=preview

The 1st issue is normal as ng-change should be used. its input field, ng-click wont work. Can you create a plunkr of 2nd issue and share the demo url — Shashank Vivek
– Shashank Vivek, Commented May 16, 2018 at 8:39
plnkr.co/edit/A3PJfBuwtpUQFAIz8hW7?p=preview . Sorry, it took so long. — abhiox
– abhiox, Commented May 17, 2018 at 7:04

davidkonrad · Accepted Answer · 2018-05-17 12:07:43Z

You kill your code with redundancy. Look at 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.

You are in fact using the "angular way" along with dt-columns. You could switch to use DTColumnDefBuilder but why define the columns when you already have a <thead> section? It would only make sense if you need to use sorting plugins etc on specific columns. And / or not is specifying the header in the markup.

Moreover, when you are rendering with angular it is not necessary to $compile anything, in fact is is very wrong, angular already does that. So

remove your dt-columns or replace it with a dt-column-defs literal
remove your $compile from the createdRow callback

Then it works. I would also remove the ng-true-value="{{user.id}}" attribute. You want an array representing the checkboxes state, why set the state to the user.id and not true or false?

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

and

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

Is really all you need.

forked plunkr -> https://plnkr.co/edit/Z82oHi0m9Uj37LcdUSEW?p=preview

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest