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

Question

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

            <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，但我不想弄乱代码。

Answer 1

 $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'。 然后在控制器顶部启动它，$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>

Answer 2

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