Question

我正在使用Ionic / Angular。

我有一个搜索栏，我需要让它在两个不同的场景中同时工作。看：

<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>

所以，我需要的是当用户搜索某些内容时，搜索栏会返回 sport.name 和 league.name ，这对你们来说很明显？

UPDATE * 这是我称之为运动的服务：

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;

}，

Answer 1

如果要搜索字段，请删除第二个过滤器并使用特殊$遍历对象层次结构。有关详细信息，请参阅the documentation。

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>

Angular：需要搜索栏处理2个不同的ng-repeat

1 个答案: