Question

我有这个角度表：

$scope.customers = [{
  first_name: "Oded",
  last_name: "Taizi",
  id: 1,
  type_link: 2
}, {
  first_name: "Ploni",
  last_name: "Almoni",
  id: 2,
  type_link: 2
}, {
  first_name: "Fred",
  last_name: "Dyllan",
  id: 3,
  type_link: 2
}, {
  first_name: "Dan",
  last_name: "Omer",
  id: 4,
  type_link: 4
}, {
  first_name: "Amir",
  last_name: "Maly",
  id: 5,
  type_link: 3
}, {
  first_name: "Noa",
  last_name: "Levy",
  id: 6,
  type_link: 3
}];

这个功能：

 $scope.checkAll = function(isCheck) {
    angular.forEach($scope.customers, function(cust) {
      cust.select = isCheck.selectAll;
    });
 };

我希望通过免费搜索和群组过滤此数据。这对我有用。
我的问题是当点击全选复选框时，即使过滤了

，它也会选中所有复选框

我只想检查所有过滤的行。

这是我的jsfiddle 尝试通过选择框过滤。

Answer 1

您可以引用过滤后的数组：

<tr ng-repeat="cust in filteredCustomers = (customers | orderBy:orderByField:reverseSort | 
    filter :searchInput | filter: {type_link: typesModel}) ">

可以$scope.filteredCustomers直接访问。

现在，请检查$scope.filteredCustomers中的客户，而不是所有客户。像：

$scope.checkAll = function(isCheck) {
  angular.forEach($scope.filteredCustomers, function(cust) {
    cust.select = isCheck.selectAll;
  });
};

working fiddle | fiddle与$scope.filteredCustomers

Answer 2

为什么不在检查$ scope.selectAll`时设置值？

$scope.checkAll = function() {
    angular.forEach($scope.customers, function(cust) {
      cust.select = $scope.selectAll;
    });
};

Forked your Fiddle here

作为旁注，您还可以将每个客户的复选框更改为：

<input type="checkbox" ng-model="cust.select" ng-click="cust.select = !cust.select">

Answer 3

您还可以使用过滤器复制逻辑。

将$filter服务注入您的控制器构造函数，如：

app.controller('myCtrl', function($scope,$http,$filter){ ... });

然后您可以使用$filter('<filter_name>')来获取相应的过滤器：

  $scope.checkAll = function(isCheck) {
        let customersBySearchInput = $filter('filter')($scope.customers, $scope.searchInput);
        let customersBySearchInputAndType = $filter('filter')(customersBySearchInput, {type_link: $scope.typesModel});

        angular.forEach(customersBySearchInputAndType, function(cust) {
          cust.select = isCheck.selectAll;
        });
     };

在多个地方拥有相同的逻辑并不是一个好主意。因此，您可以在控制器中创建一个功能，然后进行过滤，然后可以在模板和其他功能中重复使用。

注意：不要忘记可测试性 - 通常最好减少模板中的代码复杂程度，并提供执行业务的控制器方法或将关注委托给其他服务。关于可测试性，这可以改进，因为您可以轻松地对控制器逻辑进行单元测试并增加代码覆盖率。

如何在选择所有checbox中仅在AngularJS中检查过滤的复选框？

3 个答案:

Forked your Fiddle here