如何遍歷 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()