Question

例如，我有一张桌子，其中我向学生展示数学，科学，英语和其他科目的标记。我有一个checkbox，如果选中，只会列出{{student.mathMarks + student.scienceMarks > 150}}的学生（即学生数学和科学分数的总和超过150）。当checkbox未选中时，它将再次显示所有学生。有没有办法可以将条件过滤器与给定学生ng-repeat关联起来实现这一目标？

以下是与我上面尝试解释的案例有关的代码：

<tr ng-repeat="student in students">
    <td >
        {{student.name}}
    </td>
    <td >
       {{student.mathMarks}}
    </td>
    <td >
       {{student.scienceMarks}}
    </td>
     <td >
       {{student.englishMarks}}
    </td>
</tr>

<input type="checkbox" ng-model="onlyFooStudents" />

Answer 1

你可以pass a function as the expression for you filter。因此，在这种情况下，您所要做的就是在范围内声明一个检查标志的函数，例如：

$scope.yourCustomFilter = function(student) {
    // if flag is false, bring everybody. if not, bring only the ones that match.
    return $scope.onlyFooStudents || 
      student && student.mathMarks + student.scienceMarks > 150;
};

在您的约束中，您将拥有ng-repeat="student in student | filter:yourCustomFilter"。

如果你在其他地方使用相同的过滤器，实现它的另一种方法是创建一个custom filter，你可以传递参数，在这些行中：

angular.module('appFilters', []).filter('filterStudents', function() {
   function isApproved(student) {
       return student && student.mathMarks + student.scienceMarks > 150;
   }

   return function(students, showApprovedOnly) {
     // if it is to bring everybody, we just return the original array,
     // if not, we go on and filter the students in the same way.
     return !showApprovedOnly ? students : students.filter(isApproved);

     // COMPATIBLITY: please notice that Array.prototype.filter is only available IE9+.
   };
})

您的约束力为ng-repeat="student in students | studentFilter:onlyFooStudents"。请注意，我们将onlyFooStudents作为参数传递给过滤器，直接绑定到范围。

Answer 2

创建一个过滤器，它将接收一个额外的参数（复选框的参数），以了解何时有条件地启用/禁用过滤器。

＆＃13;

function FooFilter() {
  return function(data, isEnabled) {
    var result = [];
    if (angular.isArray(data) && isEnabled) {
      angular.forEach(data, function(student) {
        if (student.mathMark + student.scienceMark > 150) {
          result.push(student);
        }
      });
      return result;
    } else {
      return data;
    }
  }
}

＆＃13;

<tr ng-repeat="student in students | fooFilter : filterState">
  <td>...</td>
</tr>

...
<input type="checkbox" ng-model="filterState" /> Enable filter

＆＃13;

这是一个有效的plunker。

是否可以在AngularJS中有条件地打开和关闭过滤器？

2 个答案: