2016-07-04 3 views
3

Я пытаюсь выбрать только строки из ng-таблицы с отфильтрованными данными. Используя следующий код фильтрует строки таблицы, но даже строки, которые не показаны в настоящее время выбраны:ngTable выбрать все отфильтрованные данные

Контроллер:

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> 

Когда таблица фильтруется через имя или пол, таблицы rerenders с отфильтрованными данными. Когда вы нажмете на флажок «Выбрать все» во время фильтрации таблицы, отфильтрованные строки будут выбраны. К сожалению, при очистке фильтра также выбираются ранее отфильтрованные строки. То же самое верно при выборе всех отфильтрованных строк, а затем при запуске действия, которое должно получить выбранные элементы. (Все идентификаторы выбраны для действия.)

Как выбрать только отфильтрованные строки? Спасибо.

ответ

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

Не уверен, что это лучший способ для этого. Кроме того, это не изменяет состояние флажка «Выбрать все» в indeterminate при фильтрации фильтра> выбрать все> очистить фильтр.

0

в ваших вторых часах, изменить для возврата $ scope.tableData.filteredData; может решить вашу проблему

Смежные вопросы