Angular: need search bar working on 2 different ng-repeat

debugcn 投稿 Dev

Reacting

I am using Ionic/Angular.

I have a search bar which I need to have it working in 2 different scenarios BUT at the same time. Look:

<label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <!--here is the ng-model query-->
    <input type="search" placeholder="Search" ng-model="query">
</label>
<!--here is the 1st filter:query-->
<div ng-repeat="sport in sports | filter:query" ng-show="sport.leagues.length">
  <div>
     <strong>{{sport.name}}</strong>
   </div>
   <!--here is the 2nd filter:query-->
   <div class="item item-button-right"
        ng-repeat="league in sport.leagues | filter:query"
        on-tap="goToLines(league)">
         {{league.name}}
   </div>

so, all I need is that when the user is searching for something, the search bar returns sport.name and league.name, is it clear for you guys?

UPDATE* this is the service where I am calling sports:

getSports: function(agent) { var defer = $q.defer();

LocalForageFactory.retrieve(CONSTANT_VARS.LOCALFORAGE_SPORTS)
  .then(function(sports) {
    if (!_.isNull(sports)) {
      defer.resolve(_.values(sports));
    }else {
      $http.get(CONSTANT_VARS.BACKEND_URL + '/lines/sports/' + agent)
        .success(function(sports) {
          //forcing array instead of object
          sports = _.values(sports);
          sports = _.sortBy(sports, function(sport) {
            return sport.priority;
          });
          LocalForageFactory.set(CONSTANT_VARS.LOCALFORAGE_SPORTS, sports);
          defer.resolve(sports);
        })
        .error(function(err) {
          defer.reject(err);
        });
    }
  });
return defer.promise;

adam0101

If you wanted to search either field, drop the second filter and use the special $ to traverse the object hierarchy. See the documentation for more info.

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

myApp.controller('TestController', ['$scope', function($scope) {
  $scope.sports = [
    {name: 'Basketball', leagues: [{name: 'Mens'}, {name: 'Womens'}]},
    {name: 'Volleyball', leagues: [{name: 'Mens'}, {name: 'Womens'}]},
    {name: 'test', leagues: [{name: 'test'}]}
  ];
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="TestController">
    <input type="search" placeholder="Search" ng-model="query">

    <div ng-repeat="sport in sports | filter:{$: 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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]