ngTableフィルタリングされたすべてのデータを選択

Question

フィルタリングされたデータを持つng-tableから行のみを選択しようとしています。選択されて図示されていない表の行が、偶数行には、次のコードをフィルタリング使用：

コントローラ：

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に追加したので、そこにフィルタリングされたデータを保存することができます。それが私が選択したアイテムをチェックするために使用したものです。

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)); 
}); 

これが最善の方法かどうかはわかりません。また、> select all> clear filterをフィルタリングすると、select allチェックボックスの状態がindeterminateに変更されません。

Answer 2

2番目の時計では、$ scope.tableData.filteredDataを返します。あなたの問題を解決するかもしれない