Question

似乎自定义过滤器就是我要追求的。在筛选出元素时，我正在寻找一种特定的行为。我希望制作一个统一的搜索栏，以便返回所有未通过群组名称匹配的学生，与仅匹配学生的群组名称相匹配的群组名称。

例如，通过搜索“呃”，结果应该是“FiddlER Crabs”和“Fiery Skippers”的整个列表，但“Golden Bears”应该只显示Drew ParkER和ERic。

plunkr当前演示了默认的过滤行为。如果将HTML中的过滤器更改为我的自定义过滤器，第27行的nestFilter，并遵循控制台日志，您可以看到返回的数组正在更新，添加和删除搜索项但元素不是'被重新绘制。这是我的过滤器

bootTracker.filter('nestFilter', function() {

  return function(elements, input) {

  var filteredCohorts, filteredCohortsStudents;
  filteredCohorts = [];
  filteredCohortsStudents = [];

  console.log(elements);

  angular.forEach(elements, function(cohort) {

    var matchedStudents;
    matchedStudents = [];

    if (cohort.name.match(new RegExp(input, 'ig'))) {
      filteredCohorts.push(cohort);
    }

    angular.forEach(cohort.students, function(student) {
      if (student.name.match(new RegExp(input, 'ig'))) {
        return matchedStudents.push(student);
      }
    });

    cohort.students = matchedStudents;
    if (cohort.students.length > 0) {
      return filteredCohortsStudents.push(cohort);
    }
  });

  console.log(filteredCohorts);
  return filteredCohorts;
};
});

Answer 1

您的nestFilter存在一些问题，其中一个问题是您要修改为原始数组（设置cohort.students = matchedStudents）。

以下是nestFilter（see this Plunker for a demo）

的有效版本

bootTracker.filter('nestFilter', function() {
  return function(elements, input) {
    var filteredCohorts = [];
    console.log(elements);
    angular.forEach(elements, function(element) {
      if (element.name.match(new RegExp(input, 'ig'))) {
        filteredCohorts.push(element);
      } else {
        var matchedStudents = [];
        angular.forEach(element.students, function(student) {
          if (student.name.match(new RegExp(input, 'ig'))) {
            matchedStudents.push(student);
          }
        });
        if (matchedStudents.length > 0) {
          var cohort = angular.extend({}, element);
          cohort.students = matchedStudents;
          filteredCohorts.push(cohort);
        }
      }
    });
    console.log(filteredCohorts);
    return filteredCohorts;
  };
});

使用自定义过滤器过滤嵌套的ng-repeats

1 个答案: