如何在Angular 1.3.6上创建一个自定义过滤器来搜索嵌套数组

How to create a custom filter to search on nested arrays on Angular 1.3.6?

本文关键字：自定义 一个 过滤器 数组 嵌套 搜索 Angular 创建      更新时间：2023-09-26

我有这个数组sports，json看起来像：

 [
  {
    "id": 26,
    "name": "LIVE Betting",
    "priority": 0,
    "leagues": []
  },
  {
    "id": 8,
    "name": "NBA",
    "priority": 3,
    "leagues": [
      {
        "id": 5932,
        "parent": 1000,
        "name": "NBA",
        "sport": {
          "id": 8,
          "name": "NBA"
        },
        "lineType": "G",
        "priority": [
          1,
          3
        ],
        "part": "0"
      }
    ]
  },
  {
    "id": 24,
    "name": "College Basketball",
    "priority": 4,
    "leagues": [
      {
        "id": 2599,
        "parent": 1000,
        "name": "NCAA BASKETBALL",
        "sport": {
          "id": 24,
          "name": "College Basketball"
        },
        "lineType": "G",
        "priority": [
          0,
          4
        ],
        "part": "0"
      },
      {
        "id": 2631,
        "parent": 1000,
        "name": "NCAA BASKETBALL ADDED GAMES",
        "sport": {
          "id": 24,
          "name": "College Basketball"
        },
        "lineType": "G",
        "priority": [
          1,
          4
        ],
        "part": "0"
      },
      ...

在该数组中，你可以看到另一个名为"leagues": [{...}]的数组，它包含一个Object，我的过滤器正在顶部数组sports中进行精细搜索，但一旦我试图在leagues数组中的"name"中找到，我的应用程序就会显示一条消息，说明过滤器为空。

我刚刚意识到这是因为我使用的是Angular的1.3.6版本，但在Ionic人将其升级到1.3.8之前，我无法更改它。我用1.3.8版本制作了这个Plnkr，它正常工作，但如果你将同一个Plnkr上的版本更改为1.3.6，则会自动停止搜索leagues.name，只使用sport.name，这里有一个版本为1.3.6的Plnkr，在两个Plnkr上都尝试搜索Greece，在版本为1.3.8的第一个中有效，但在版本1.3.6中，只有消息no sports to show出现

<input type="search" ng-model="query">
<div ng-repeat="sport in sportsFilter = (sports | filter:query)">
        <!--this array works fine-->
        <strong>{{sport.name}}</strong>
      </div>
      <div ng-repeat="league in sport.leagues">
        <!--this one not works at all-->
        {{league.name}}
      </div>
</div>

我已经尝试了所有的方法，使用resolve，使用不同的型号，等等，实际上我刚刚意识到我需要一个自定义过滤器，所以我希望你帮我一把，因为我不知道从哪里开始使用它。

或者有更简单的方法吗？

<div ng-app="myApp">
  <div ng-controller="TestController">
    <input type="search" placeholder="Search" ng-model="query">
    <div role="alert" ng-show="sportfilter.length==0">No sports to show</div>
    <div ng-repeat="sport in sportfilter=(sports  | filter:matchNameDeep(query))" ng-show="sport.leagues.length">
      <div>
        <strong>{{sport.name}}</strong>
      </div>
      <div class="item item-button-right" ng-repeat="league in sport.leagues" on-tap="goToLines(league)">
        {{league.name}}
      </div>
    </div>
  </div>
  </div>

$scope.matchNameDeep = function(query) {
  return function(sport) {
    return !query || sport.name.match(new RegExp(query, "ig")) || sport.leagues.some(function(element, index, array) {
    return element.name.match(new RegExp(query, "ig"))
    });
  }
};

看这里，它与角1.3.6一起工作http://plnkr.co/edit/0w9PYbDsOz0mHBdVldZt?p=preview

您可以使用https://github.com/marklagendijk/lodash-deep对于这种类型的事情。

相关文章：