2014-03-13 6 views
2

ngTable 지시문을 사용하여 테이블에 멋진 필터링을 추가합니다. 내보기가 있습니다필터링 된 데이터를 지우는 방법?

<table ng-table="tableParams" show-filter="true" class="table table-bordered table-hover table-condensed table-striped"> 
    <tr ng-repeat="item in items"> 
     <td class="text-center"> 
     <input type="checkbox" /> 
     </td> 
     <td data-title="'SKU'" filter="{ 'sku': 'text' }" sortable="'sku'"> 
     <a href="/company/item/{{ item._id }}">{{ item.sku }}</a> 
     </td> 
     <td data-title="'Description'" filter="{ 'description': 'text' }"> 
     <a href="/company/item/{{ item._id }}">{{ item.description }}</a> 
     </td> 
     <td data-title="'Client'" filter="{ 'client.name': 'select' }"> 
     {{ item.client.name }} 
     </td> 
     <td data-title="'Active'" filter="{ 'active': 'select' }" class="text-center"> 
     {{ item.active }} 
     </td> 
     <td> 
     DEACTIVE/EDIT 
     </td> 
    </tr> 
    </table> 

내 컨트롤러가 있습니다

$scope.tableParams = new ngTableParams({ 
    page: 1,   // show first page 
    count: 10,   // count per page 
}, { 
    total: $scope.items.length, // length of data 
    getData: function($defer, params) { 
    var orderedData = params.sorting() ? 
     $filter('orderBy')($scope.items, params.orderBy()) : $scope.items; 

    orderedData = params.filter() ? 
     $filter('filter')(orderedData, params.filter()) : orderedData; 

    $scope.items = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()); 

    params.total(orderedData.length); // set total for recalc pagination 
    $defer.resolve($scope.items); 
    } 
}); 

이 때, 그러나 enter image description here

enter image description here

필터와 같은 필터링 항목에 대해 잘 작동하는 것 같다 I 필터를 지우고 아무것도 바뀌지 않습니다. 모든 행이 다시 나타나기를 원하지만, 그렇지 않습니다. 아이디어?

+0

getData() 메소드에 console.log 문을 추가하여 필터 필드가 변경 될 때마다 호출되는지 확인할 수 있습니까? –

+0

한 번만 불러올 수 있습니다. – Shamoon

답변

1

원래 배열을 계속 변경했기 때문에 추측하고 있습니다. 즉, $ scope.items는 먼저 모든 항목을 포함합니다. 그런 다음 더 이상 일치하지 않는 항목을 제거하여 $ scope.items를 필터링하고 수정합니다. 필터를 지울 때 $ scope.items에는 마지막 필터와 일치하는 항목 만 포함됩니다.

$ scope.items를 가져 와서 필터를 실행 한 다음 orderedData에 할당하면됩니다. 그런 다음 $ scope.items를 orderedData에 할당합니다. 따라서 $ scope.items의 크기가 점점 더 작아지고 있습니다.

로 변경합니다 :

$scope.tableParams = new ngTableParams({ 
    page: 1,   // show first page 
    count: 10,   // count per page 
}, { 
    total: $scope.items.length, // length of data 
    getData: function($defer, params) { 
    var orderedData = params.sorting() ? 
     $filter('orderBy')($scope.items, params.orderBy()) : $scope.items; 

    orderedData = params.filter() ? 
     $filter('filter')(orderedData, params.filter()) : orderedData; 

    orderedData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()); 

    params.total(orderedData.length); // set total for recalc pagination 
    $defer.resolve(orderedData); 
    } 
}); 

그리고 당신의 ng-repeat에 :

ngTable 필터링 된 데이터 범위에 $ 데이터 속성을 추가 할 것으로
<tr ng-repeat="item in $data"> 

.

관련 문제