如何在Angular中仅获取/检查表的可见行答案

【问题标题】：How to get/check only Visible Rows of a Table in Angular如何在Angular中仅获取/检查表的可见行
【发布时间】：2019-02-27 23:46:27
【问题描述】：

如何在几个过滤器后仅获取表中的可见行？
我有分页表，可以对其进行一些过滤。
我只想使用 SelectAll Checkbox 选择可见的。
起初我只有一个过滤器，只是迭代了这个过滤器的结果。

  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
      }

现在，随着更多过滤器的出现，我们将不胜感激 SelectAll “Visbile/Shown/Filtered”行等更合适的解决方案。

selectAllChange() {
       ...
//somehow all shown Rows over all pages after filtered
        angular.forEach(visibleRows, (item) => {
          item.Selected = this.$scope.AllChange;
          this.change(item);
        });
      }

我尝试将表别名为results

    <tr dir-paginate="v in $ctrl.langV | filter:{Name:searchK,value1:searchV}| filterByProd:selectedProduct|orderBy: sortType:sortReverse|itemsPerPage:10 as results">  
...  
    {{results}}

但它只给我实际页面的行而不是整个表格。
有没有一种简单的方法可以在过滤后获取所有行？或者我是否以某种方式将我的 CustomeFilter -> | filterByProd:selectedProduct 与已实现的 AngularFilters |filter:{Name:searchK,value1:searchV} 结合起来，并在那里返回一个带有过滤对象的数组以供选择？

【问题讨论】：

这可能会对您有所帮助。 stackoverflow.com/questions/23704743/…

标签： javascript angularjs dom angularjs-scope angularjs-ng-repeat

【解决方案1】：

所以不要命名整个

<div ng-repeat="some in something | someFilter as results"></div>

您必须将其更改为：

<div ng-repeat="some in visibleItems = (something | someFilter)"></div>

然后您可以在控制器中使用$scope.visibleItems，它只会包含通过您的 someFilter 的特定项目子集。
现在只能由 SelectAll 更改。以我为例

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

在那里找到解决方案： AngularJS - "Select All" items that are currently visible

【讨论】：