javascript - 如何遍历 Angular 数据表中的过滤行

可以说，我有简单的数据表

            <table datatable="" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover">
                <thead>
                    <th>ID</th>
                    <th>Name</th>
                </thead>
                <tbody>
                    <tr ng-repeat"reservation in reservations">
                        <td>{{reservation.ID}}</td><td>{{reservation.name}}</td>
                    </tr>
                </tbody>
            </table>

当我将一些字符串放入搜索框时，数据表正在被过滤。现在我想在 Angular 中遍历过滤的行并将 ID 读取到数组。如何在 Angular 中处理它？我可以使用 jquery，但我不想弄乱代码。

最佳答案

  $scope.addressDTInstance = {};
    var j = $scope.addressDTInstance.DataTable.rows();

  <table id="addressSelectionTable" class="table table-condensed table-bordered" datatable="ng" dt-options="addressdtOptions" dt-column-defs="addressdtColumnDefs" dt-instance="addressDTInstance">

这是让你上路的东西。需要一个您没有的 dtInstance 实例。所以在html table标签中添加dt-instance='dtInstance'。
然后在 Controller 顶部启动它，$scope.dtInstance = {};。
在您的 javascript 中执行单击或某些操作，您可以在其上设置断点，然后检查您的 $scope.dtInstance 以查看您拥有的所有属性和方法。正如您在我的代码段中看到的，我正在访问我的 dtInstance 的 DataTable.Rows。如果您需要更好的示例或帮助，请给我留言，我会修改。

更新
这是我发现有效的方法。我当然使用 DTOptionsbuilder。这将被调用两次，第一次是在创建时，第二次是在我填充填充我的表的数组变量时。我只是检查行是否存在并且第一个不是“无结果”。

 $scope.addressdtOptions = DTOptionsBuilder.newOptions()
                   .withOption('bFilter', false)
                   .withOption('bInfo', false)
                   .withOption('paging', false)
                   .withOption('processing', true)
                   .withOption('aaSorting', [1, 'asc'])
                   .withOption('language', { zeroRecords: 'No results' })
                   .withOption('initComplete', function () {
                       var rows = $("#addressSelectionTable > tbody > tr");
                       if (rows.length > 0 && rows[0].innerText !== "No results") {
                           var x = 3;
                       }

                   });

在这里，我正在为表设置 ng-repeat 变量。你可能没有按照我的方式去做，但你应该能够按照自己的方式解决问题。

 $.when($OfficerService.GetAddressSelections($scope.officer.EntityID, $scope.officer.EntityTypeID, $scope.officer.MemberID)).then(function (result) {
                        $scope.addresses = result.data;
                        $scope.$applyAsync();
                    });

<table id="addressSelectionTable" class="table table-condensed table-bordered" datatable="ng" dt-options="addressdtOptions" dt-column-defs="addressdtColumnDefs" dt-instance="addressDTInstance">
                <thead>
                    <tr>
                        <th></th>
                        <th>Type</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip</th>
                        <th>Country</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="a in addresses">
                        <td class="centerColumn">
                            <input type="button" class="btn btn-primary" value="Select" ng-click="selectAddress(a.AddressID,a.AddressLocationCode,$event)" />
                        </td>
                        <td>
                            <span ng-if="a.AddressLocationCode == 'E'">Office</span>
                            <span ng-if="a.AddressLocationCode == 'M'">Member</span>
                        </td>
                        <td>
                            {{a.AddressLine1}}
                            <span ng-if="a.AddressLine2 != null"><br /> {{a.AddressLine2}}</span>
                        </td>
                        <td>{{a.City}}</td>
                        <td>{{a.StateCode}}</td>
                        <td>{{a.Zip}}</td>
                        <td>{{a.CountryCode}}</td>
                        <td>{{a.AddressID}}</td>
                    </tr>
                </tbody>
            </table>

关于javascript - 如何遍历 Angular 数据表中的过滤行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41015152/