How can I get only the Visbile Rows in a Table after a Few Filters?
I have Table with Pagination and can do some Filter on it.
I want to select only the Visible ones with SelectAll Checkbox.
At first I had only one Filter and just Iterated the Result of this Filter.
selectAllChange() {
if (this.$scope.AllChange) {
this.$scope.AllChange = true;
this.$scope.count = this.langV.length;
} else {
this.$scope.AllChange = false;
this.$scope.count = 0;
}// get whether to set true/false
var filtered = this.filter(this.langV, {
Name: this.$scope.searchK,
});// filter after Search
angular.forEach(filtered, (item) => {
item.Selected = this.$scope.AllChange;
this.change(item);
});//set all true/false
}
Now as more Filters are coming a more suitable Solution like SelectAll "Visbile/Shown/Filtered" rows would be appreciated.
selectAllChange() {
...
//somehow all shown Rows over all pages after filtered
angular.forEach(visibleRows, (item) => {
item.Selected = this.$scope.AllChange;
this.change(item);
});
}
I tried with alias the Table as results
<tr dir-paginate="v in $ctrl.langV | filter:{Name:searchK,value1:searchV}| filterByProd:selectedProduct|orderBy: sortType:sortReverse|itemsPerPage:10 as results">
...
{{results}}
But it is giving me only the Rows of the actual Page and not whole Table.
Is there an easy way to get all Rows after they are filtered?
Or have I somehow to combine my CustomeFilter -> | filterByProd:selectedProduct
with the implemented AngularFilters |filter:{Name:searchK,value1:searchV}
and in there return an Array with Filtered objects to Select?
So instead of name the whole
<div ng-repeat="some in something | someFilter as results"></div>
You have to change it to:
<div ng-repeat="some in visibleItems = (something | someFilter)"></div>
Then you can use $scope.visibleItems
inside your controller and it will only contain the certain subset of items that have passed your someFilter.
This now will only be changed by SelectAll.
In my Case for Example
selectAllChange() {
if (this.$scope.AllChange) {// my SelectAll Checkbox
this.$scope.AllChange = true;
} else {
this.$scope.AllChange = false;
}// get whether to check/uncheck
angular.forEach(this.$scope.visibleItems, (item) => {
item.Selected = this.$scope.AllChange;
this.change(item); // set every visible to checked/unchecked
});
}
Solution found there: AngularJS - "Select All" items that are currently visible