CODEWITHSUNDEEP
angularjs
Non
Non

Reputation: 8589

why is this filter not working properly?

I have a filter with a very weird behavior.

this way works only with the 1 array, is not search thru 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>

it doesn't matter if I remove |filter:query from the second ng-repeat

this way works only with the second array: 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>

so, my question is, why do I have to change the position of the input in order to have it working ?

and what can I do in order to have it working with both arrays ?

Upvotes: 1

Views: 822

Answers (1)

Ninjarabbi
Ninjarabbi

Reputation: 480

It works for me. Just notice you are using the same query param to filter both sports and sport.leagues. Here's my working example (filter by the word "soccer" to get results from both):

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>

Upvotes: 1

Related Questions