响应模式下的数据表ng-click不起作用

Datatable in responsive mode ng-click doesn't work

本文关键字：ng-click 不起作用 数据表 模式 响应      更新时间：2023-09-26

我有一个由angular ng-repeat填充的数据表。下面的代码是我正在使用的，我只改变了标题和重复的内容。

这一切都很完美，直到我在移动设备上测试它，表格开始响应，添加了小圆圈+号来展开和查看隐藏列中的数据。当这种情况发生时，"更多信息"按钮就不再工作了。

根据我的推测，当您单击小+符号时出现的信息是在您单击它时动态添加的，这意味着"更多信息"按钮是原始的副本，仍然在隐藏的表列中。我认为这是导致ng-click事件没有"连线"的原因。

有人知道如果我是正确的和/或如何解决这个问题吗?

<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>

这是我的控制器打字稿。我是一个使用typescript的新手，我基本上是在复制这个系统中已经存在的东西，并为我自己的工作重新调整它:

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

我认为你需要在移动设备上使用ngTouch

您实现功能的方法是错误的。您可以尝试使用$index而不重复按钮，如下所示。

<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>
相关文章：