How to get/check only Visible Rows of a Table in Angular

Question

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?

This might help you. http://stackoverflow.com/questions/23704743/angularjs-select-all-items-that-are-currently-visible — Gowthaman, Oct 17 '16 at 16:34

score 2 · Accepted Answer · edited Feb 27 '19 at 15:46

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

How to get/check only Visible Rows of a Table in Angular

1 Answers1