在angularjs中使用相同的搜索框过滤类别和子类别答案

【问题标题】：filter category and subcategory with the same search box in angularjs在angularjs中使用相同的搜索框过滤类别和子类别
【发布时间】：2016-08-10 16:24:37
【问题描述】：

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

<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>

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

【问题讨论】：

标签： html angularjs angularjs-filter

【解决方案1】：

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

如果过滤器函数的名称与您正在执行的搜索匹配，则过滤器函数可以在其子类别中设置“forceDisplay”变量。然后显示所有将 forceDisplay 变量设置为 true 的类别，并显示没有此 forceDisplay 但与搜索输入匹配的类别（它们的父级与搜索不匹配但它们匹配）。

我强烈建议使用带有 debounce 值的 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 变量而不是存储它）。

【讨论】：