如何使用angularjs在两级菜单中进行搜索过滤？答案

【问题标题】：How to do search filter in two level menu with angularjs?如何使用angularjs在两级菜单中进行搜索过滤？
【发布时间】：2015-05-02 02:59:24
【问题描述】：

我正在尝试将过滤器实现到两级菜单。

我的菜单结构如下：

加州V

  View all
  San Francisco
  Los Angles

佛罗里达州

  View all
  Miami
  Tallahassee

所以如果我在过滤器中输入“ia”，它应该显示如下：

加利福尼亚ia v

  View all

佛罗里达州

  View all
  M**ia**mi

我有两个嵌套的州和城市的 ng-repeats。

伪代码：

<filter ng-model=search.$></filter> <div ng-repeat="states in usa.states | filter : search.states"> <b>{{states}}</b> <div ng-repeat="cities in states | filter : search.cities"> <b>{{cities}}</b> </div> </div>

这不能正常工作。有没有办法可以为两级菜单创建自定义过滤器功能？我知道如何处理一个级别。有人能指出我正确的方向如何处理这种要求吗？

谢谢！

【问题讨论】：

如何将函数传递给您的第一个过滤器而不是“search.states”？该功能将搜索州名和城市名。 docs.angularjs.org/api/ng/filter/filter
我试过这样：'$scope.searchFilter = function (name) { var keyword = new RegExp($scope.nameFilter, 'i');返回 !$scope.nameFilter ||关键字.test（状态）||关键字.test（城市）； }; ' 但它不过滤州，只过滤城市。

标签： javascript html angularjs search angularjs-filter

【解决方案1】：

你的 ngRepeat 有点奇怪......不应该是这样的：

<filter ng-model="nameFilter"></filter>
<div ng-repeat="state in usa.states | filter:nameFilter">
   <b>{{state.name}}</b>
   <div ng-repeat="city in state.cities | filter:nameFilter">
      <b>{{city.name}}</b>
   </div>
</div>

然后，您可以用函数替换第一个“searchFilterValue”：

$scope.searchFilter = function (state) {
  if (!$scope.nameFilter) {
    return true;
  }
  var keyword = new RegExp($scope.nameFilter, 'i');
  if (keyword.test(state.name)) {
    return true;
  }
  for (var i = 0; i < state.cities.length; ++i) {
    if (keyword.test(state.cities[i].name)) {
      return true;
    }
  }
  return false;
}

【讨论】：