javascript - 如何创建自定义过滤器来搜索 Angular 1.3.6 中的嵌套数组？

Question

我有这个数组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，我做了this Plnkr使用版本 1.3.8 并且可以正常工作，但是如果您将同一 Plnkr 上的版本更改为 1.3.6，则会自动停止通过 leagues.name 进行搜索 且仅适用于 sport.name 和 here is a Plnkr with the version 1.3.6 ，在两个 Plnkrs 上尝试搜索希腊，第一个版本 1.3.8 有效，但在版本 1.3.6 中仅出现消息没有体育节目

<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、使用不同的模型等，实际上我刚刚意识到我需要一个自定义过滤器，所以我希望你能帮我一把因为我不知道从哪里开始。

或者有更简单的方法吗？

Answer 1

<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"))
    });
  }
};

请参阅此处，它与 Angular 1.3.6 配合使用 http://plnkr.co/edit/0w9PYbDsOz0mHBdVldZt?p=preview