ngTable選擇所有過濾的數據

Question

我想從篩選的數據只選擇ng表中的行。使用以下代碼濾波器未正在選擇中示出的表中的行，但即使是行：

控制器：

let sampleData = [{id: 1, name: 'John Doe', gender: 'Male'}, 
    {id: 2, name: 'Jane Doe', gender: 'Female'}, 
    {id: 3, name: 'Mary Jane', gender: 'Female'}, 
    {id: 4, name: 'Mary Poppins', gender: 'Female'}]; 

$scope.tableParams = new NgTableParams({ 

}, { 
    dataset: sampleData 
}); 

$scope.checkboxes = { 
    checked: false, 
    items: {} 
}; 

$scope.$watch(() => { 
    return $scope.checkboxes.checked; 
}, (value) => { 
    sampleData.map((item) => { 
     $scope.checkboxes.items.id = value; 
    }); 
}); 

$scope.$watch(() => { 
    return $scope.checkboxes.items; 
},() => { 
    let checked = 0; 
    let unchecked = 0; 
    let total = sampleData.length; 

    sampleData.map((item) => { 
     if ($scope.checkboxes.items.id) { 
      checked++; 
     } else { 
      unchecked++; 
     } 
    }); 

    if (unchecked === 0 || checked === 0) { 
     $scope.checkboxes.checked = checked === total; 
    } 

    angular.element($element[0].getElementsByClassName('select-all')).prop('indeterminate', (checked != 0 && unchecked != 0)); 
}); 

HTML：

<script type="text/ng-template" id="checkbox.html"> 
    <input type="checkbox" ng-model="checkboxes.checked" class="select-all" value=""> 
</script> 
<table class="table" ng-table="tableParams" show-filter="true"> 
    <tr ng-repeat="item in $data track by $index"> 
     <td header="'checkbox.html'"> 
      <input type="checkbox" ng-model="checkboxes.items[item.id]"> 
     </td> 
     <td data-title="'Name'" filter="{'name': 'text'}"> 
      {{item.name}} 
     </td> 
     <td data-title="'Gender'" filter="{'gender': 'text'}"> 
      {{item.gender}} 
     </td> 
    </tr> 
</table> 

當表經由名過濾或性別，表格會根據過濾的數據進行迴歸。在過濾表格時單擊全選複選框時，將選中已過濾的行。不幸的是，當你清除過濾器時，先前過濾出的行也被選中。選擇所有已過濾的行，然後觸發應該獲取所選項目的操作時也是如此。 （所有ID都是爲動作選擇的。）

如何才能只選擇過濾的行？謝謝。

Answer 1

好的，我找到了它。我剛剛爲$scope添加了一個tableData對象，所以我可以將過濾的數據存儲在那裏。這是我用來檢查選定的項目。

let sampleData = [{id: 1, name: 'John Doe', gender: 'Male'}, 
    {id: 2, name: 'Jane Doe', gender: 'Female'}, 
    {id: 3, name: 'Mary Jane', gender: 'Female'}, 
    {id: 4, name: 'Mary Poppins', gender: 'Female'}]; 

$scope.tableData = { 
    filteredData: [], 
    checkboxes: { 
     checked: false, 
     items: {} 
    } 
}; 

$scope.tableParams = new NgTableParams({ 
    page: 1, 
    count: 10 
}, { 
    total: data.length; 
    getData: ($defer, params) => { 
     let filter = params.filter(); 
     let count = params.count(); 
     let page = params.page(); 
     let filteredData = filter ? $filter('filter')(data, filter) : data; 

     params.total(filteredData.length); 
     $scope.tableData.filteredData = filteredData; 

     $defer.resolve(filteredData.slice((page - 1) * count, page * count)); 
    } 
}); 

$scope.$watch(() => { 
    return $scope.tableData.checkboxes.checked; 
}, (value) => { 
    $scope.tableData.filteredData.map((item) => { 
     $scope.tableData.checkboxes.items[item].id = value; 
    }); 
}); 

$scope.$watch(() => { 
    return $scope.tableData.checkboxes.items; 
},() => { 
    let checked = 0; 
    let unchecked = 0; 
    let data = $scope.tableData.filteredData; 
    let total = data.length; 
    let checkboxes = $scope.tableData.checkboxes; 

    data.map((item) => { 
     if (checkboxes.items[item].id) { 
      checked++; 
     } else { 
      unchecked++; 
     } 
    }); 

    if (unchecked === 0 || checked === 0) { 
     checkboxes.checked = checked === total; 
    } 

    angular.element($element[0].getElementsByClassName('select-all')).prop('indeterminate', (checked != 0 && unchecked != 0)); 
}); 

不太確定這是否是最好的方法。此外，當您選擇所有>清除過濾器時，這並不會將選中所有複選框的狀態更改爲indeterminate。

Answer 2

在你的第二塊手錶中，改爲返回$ scope.tableData.filteredData;可以解決你的問題