Datatable in responsive mode ng-click doesn't work

Question

I have a datatable that is populated by angulars ng-repeat. the code below is what I am using, I have only changed the headers and what is being repeated.

It all works perfectly until I test it on a mobile device and the table turns responsive, adding the little circled + sign to expand and view the data from the hidden columns. When this happens the "More Info" button simply doesn't work any more.

From what I have surmised, the information that appears when you click the little + sign is dynamically added at the time you click it, meaning the "more info" button is a duplicate of the original which is still in the hidden table column. I believe that is causing the ng-click event to not be "wired up".

Does anyone know if I'm correct and/or how to fix this?

<table id="dtTransactions" datatable="ng" class="table table-bordered dt-responsive dataTable no-footer dtr-inline collapsed">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
            <th>header 4</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="person in people">
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>
            <td>{{ person.eyecolour }} }}</td>
            <td>{{ person.shoesize }} }}</td>
            <td align="center">
                <button type="button" class="btn btn-default" ng-click="doSomething(person)">More Info</button>
            </td>
        </tr>
    </tbody>
</table>

Here is my typescript for the controller. I'm very new to using typescript and am essentially copying what is already in this system and rejigging it for my own work:

module app.agreement {
    'use strict';

    class DetailController {
        // some variable declared

        static $inject = ['$compile', '$scope', 'data', 'app.services.AgreementService', '$mdDialog']
        constructor(private $compile: ng.ICompileService, 
                    private $scope: ng.IScope, 
                    private data: any, 
                    private agreementService: app.services.IAgreementService, 
                    private mdDialog: angular.material.IDialogService) {

            $('#dtTransactions').on('responsive-display', function () {
                alert('asd');
                //var c = $compile($('#dtTransactions').html());
                //c($scope);
                //$scope.$apply();
            });

            this.init();
        }

        init(): void {
            // variables initialised
        }
    }

    angular.module('app.agreement')
        .controller('app.agreement.DetailController', DetailController);
} 

Answer 1

我认为您需要用于移动设备的ngTouch 。

Answer 2

Your approach to achieve your functionality is wrong. You may try workaround with $index without repeating button as below.

<tr ng-repeat="person in people">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
        <td>{{ person.eyecolour }} }}</td>
        <td>{{ person.shoesize }} }}</td>
        <td align="center">
            <button type="button" class="btn btn-default" ng-click="doSomething($index)">More Info</button>
        </td>
    </tr>