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

좋아요, 알았어요. 방금 tableData 개체를 $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

두 번째 시계에서 $ scope.tableData.filteredData를 반환하도록 변경하십시오. 문제를 해결할 수 있습니다.