如何创建自定义过滤器以在 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 with the version 1.3.8 and it works properly, but if you change the version on that same Plnkr to the 1.3.6 automatically stop searching through leagues.name and only works with sport.name, and here is a Plnkr with the version 1.3.6，在两个 Plnkrs 上尝试搜索 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，使用不同的模型等等，实际上我刚刚意识到我需要一个自定义过滤器，所以我希望你能帮助我，因为我不知道从哪里开始。

或者有更简单的方法吗？

Answer 1

你可以使用 https://github.com/marklagendijk/lodash-deep 来处理这类事情。

Answer 2

<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

一起工作

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

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

javascript

arrays

angularjs