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来实现所需的逻辑。

过滤功能可以设置＆＃34; forceDisplay＆＃34;如果其名称与您正在进行的搜索匹配，则在其子类别上设置变量。然后显示所有将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中的相同搜索框

1 个答案: