Question

我有一个非常奇怪的过滤器。

这种方式仅适用于1个数组，而不是通过leagues.name

进行搜索

<input type="text"
       ng-model="query">

<div ng-repeat="sport in sportsFilter = (sports | filter:query)">
   <strong>
     {{sport.name}}
   </strong>
   <div ng-repeat="league in sport.leagues | filter:query"
        on-tap="goToLines(league)">
        {{league.name}}
   </div>
</div>

如果我从第二个|filter:query中移除ng-repeat

，那无关紧要

这种方式仅适用于第二个数组：leagues.name

<div ng-repeat="sport in sportsFilter = (sports | filter:query)">
     <strong>
       {{sport.name}}
     </strong>

    <input type="text"
           ng-model="query">

      <div ng-repeat="league in sport.leagues | filter:query">
        {{league.name}}
      </div>
</div>

所以，我的问题是，为什么我必须改变输入的位置以使其工作？

我该怎么做才能让它与两个阵列一起工作？

Answer 1

它对我有用。请注意，您使用相同的query参数来过滤sports和sport.leagues。这是my working example（按“足球”一词过滤以获得两者的结果）：

JS：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.sports = [{name: 'soccer', leagues: [{name: 'american league'}, {name: 'english league'}, {name: 'world soccer league'}]}]
});

HTML：

<body ng-controller="MainCtrl">
  <input type="text" ng-model="query">
  <div ng-repeat="sport in sportsFilter = (sports | filter:query)">
    <strong>
      {{sport.name}}
    </strong>
    <div ng-repeat="league in sport.leagues | filter:query" on-tap="goToLines(league)">
      {{league.name}}
     </div>
  </div>    
</body>

为什么这个过滤器不能正常工作？

1 个答案:

JS：

HTML：