如何迭代Angular数据表中的过滤行答案

【问题标题】：How to iterate over filtered rows in Angular datatable如何迭代Angular数据表中的过滤行
【发布时间】：2016-12-07 10:35:08
【问题描述】：

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

            <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，但我不想把代码弄得一团糟。

【问题讨论】：

所以你想要一个搜索框（作为过滤器），它将显示过滤后的 ID（基于搜索框的文本）？
数据表库已经有一个过滤框。我想获得过滤后的 ID

标签： javascript angularjs datatables

【解决方案1】：

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

  &lt;table id="addressSelectionTable" class="table table-condensed table-bordered" datatable="ng" dt-options="addressdtOptions" dt-column-defs="addressdtColumnDefs" dt-instance="addressDTInstance"&gt;

这是让您上路的东西。需要一个您没有的 dtInstance 实例。所以在 html 表格标签中添加 dt-instance='dtInstance' 。然后在控制器顶部启动它，$scope.dtInstance = {};。在您的 javascript 中执行单击或某些操作，您可以在其上设置断点，然后检查您的 $scope.dtInstance 以查看您拥有的所有属性和方法。正如您在我的 sn-p 中看到的，我正在访问 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>

【讨论】：

【解决方案2】：

对我来说有效：$scope.dtInstance.DataTable.rows( { search: 'applied' } ).data()

【讨论】：