ng-click, ng-модель не работает в angularjs datatable - PullRequest
Новая
       26

ng-click, ng-модель не работает в angularjs datatable

0 голосов
/ 16 мая 2018

У меня есть данные с фильтрами столбцов, созданными с помощью 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);
    }
});

Вопросы:

  1. идентификатор пользователя не передается в функцию checkValue. Следовательно, console.log - undefined.

  2. Предположим, если установлен флажок 1-го пользователя, значение checkboxValue array равно [undefined: '1']. Если флажок второго пользователя установлен, значение массива checkboxValue становится [undefined: '2']. Только один флажок проверяется. Почему это?

Демо: https://plnkr.co/edit/A3PJfBuwtpUQFAIz8hW7?p=preview

1 Ответ

0 голосов
/ 17 мая 2018

Вы убиваете свой код с избыточностью. Посмотрите на это :

При использовании углового способа вы НЕ МОЖЕТЕ использовать директиву dt-column. Действительно, модуль сделает данные доступными после того, как обещание решена. Так что для DataTables это похоже на рендеринг статической таблицы.

Вы на самом деле используете «угловой путь» вместе с dt-columns. Вы можете переключиться на использование DTColumnDefBuilder, но зачем определять столбцы, если у вас уже есть раздел <thead>? Это имеет смысл только в том случае, если вам нужно использовать сортировочные плагины и т. Д. В определенных столбцах. И / или нет указывает заголовок в разметке.

Более того, когда вы выполняете рендеринг с помощью angular, $compile ничего не нужно, на самом деле это очень неправильно, angular уже делает это. Итак

  • удалите 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)" />

Это действительно все, что вам нужно.

раздвоенный планкр -> https://plnkr.co/edit/Z82oHi0m9Uj37LcdUSEW?p=preview

...