在 angularjs 中使用相同的搜索框筛选类别和子类别

Question

我有两个包含类别和子类别的嵌套列表，一个我用来过滤类别的搜索框，所以我的代码就是这样

<input type="text" ng-model="filter_categories">
<ul>
    <li ng-repeat="category in menu | filter: {name:filter_categories}">
        {{ category.name }}
        <ul>
            <li ng-repeat="subcategory in category.subcategories"> {{ subcategory.name }}</li>
        </ul>
    </li>
</ul>

现在我想在类别和子类别中进行相同的框搜索因此，如果该值与类别匹配，则将显示该类别及其所有子类别，
否则，如果它与子类别匹配，则该类别将显示，并且只有匹配的子类别才会显示在其下方，如果两者都匹配，则像第一种情况（将显示类别及其子类别）

我试过类似的东西

<input type="text" ng-model="filter_categories_subcategories">
<ul>
    <li ng-repeat="category in menu | filter: {name:filter_categories_subcategories}">
        {{ category.name }}
        <ul>
            <li ng-repeat="subcategory in category.subcategories | filter: { subcategory_name:filter_categories_subcategories}"> {{ subcategory.name }} </li>
        </ul>
    </li>
</ul>

但它不起作用，因为它只显示类别或子类别

Answer 1

您可以使用 filter function 来实现您想要的逻辑。

过滤函数可以在其子类别上设置一个 "forceDisplay" 变量，前提是其名称与您正在执行的搜索匹配。然后显示所有将 forceDisplay 变量设置为 true 的类别，并显示没有此 forceDisplay 但与搜索输入匹配的类别（它们的父级与搜索不匹配但它们匹配）。

我强烈建议使用带有去抖动值的 ng-model-options 以避免过于频繁地进行所有这些计算。

$scope.displayCategory = function(category) {
  if (category.name.indexOf($scope.filter_categories_subcategories) !== -1) {
    // if we display a category, then force the display of its subcategories
    for(var i = 0; i < category.subcategories.length; i++) {
      category.subcategories[i].forceDisplay = true;
    }
    return true;
  }
  var hasOneDisplayedSubcategory = false;
  for(var i = 0; i < category.subcategories.length; i++) {
    // reset the forceDisplay variable before checking if categories should be displayed
    var subcategory = category.subcategories[i];
    subcategory.forceDisplay = false;
    if (!hasOneDisplayedSubcategory && $scope.displaySubcategory(subcategory)) {
      hasOneDisplayedSubcategory = true;
    }
  }
  return hasOneDisplayedSubcategory;
};
$scope.displaySubcategory = function(subcategory) {
  // if the forceDisplay variable is set, it means we're in a subcategory
  if (subcategory.forceDisplay) {
    return true;
  }
  if (subcategory.name.indexOf($scope.filter_categories_subcategories) !== -1) {
    return true;
  }
  return false;
};

在你的 html

<input type="text" ng-model="filter_categories_subcategories">
<ul>
    <li ng-repeat="category in categories | filter: displayCategory">
        {{ category.name }}
        <ul>
            <li ng-repeat="subcategory in category.subcategories | filter:displaySubcategory">
               {{ subcategory.name }}
            </li>
        </ul>
    </li>
</ul>

Working plunkr example

另一种方法是创建从子类别到其父类别的引用，并检查 displaySubcategory 函数是否应显示其父类别（每次计算 forceDisplay 变量而不是存储它）。

在 angularjs 中使用相同的搜索框筛选类别和子类别

filter category and subcategory with the same search box in angularjs

html

angularjs

angularjs-filter