Проблема с фильтрами

Question

У меня есть небольшая проблема с фильтрами на угловом, чтобы быть явным: поиск ввода с прикрепленным фильтром.

if you see this example, is exactly what I want

на самом деле я сделал это Plnkr с реальной информацией моего приложения. Вы можете искать спортивные состязания и свои лиги, но в моем приложении вы не можете, вы можете просто обыскать спорты, и как только вы попытаетесь найти какие-либо лиги, приложение вернет сообщение «не соответствует никаким критериям поиска», ниже Я поставлю весь код, касающийся этой проблемы, кто-то говорит, что это может быть проблема маршрутизации или что у меня отсутствует решение или что-то в этом роде, поэтому я здесь, потому что мне нужна ваша помощь. Также я записал VIDEO, чтобы вы поняли проще, как вы видите на видео, если я ставлю «колледж», фильтр работает, но ниже есть 2 лиги, начиная с «ncaa», если я набираю «ncaa», тогда пустое сообщение показывает вверх. Это странно, потому что в примере Plnkr все работает правильно.

sportsList.html

<input type="text" 
     placeholder="Sports finder..." 
     ng-model="query"> 


<div ng-repeat="sport in sportsFilter = (sports | filter:query)"> 
    ng-if="sport.leagues.length"> 
    <!--this filter works correctly--> 
     {{sport.name}} 

     <div ng-repeat="league in sport.leagues | filter:query"> 
     <!--this filter do not any respond--> 
     {{league.name}} 

    </div> 
</div> 

app.js

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('app.sports', { 
     url:'/sports', 
     views:{ 
     menuContent:{ 
      templateUrl:'templates/sportsList.html', 
      controller:'SportsController' 
     } 
     } 
    }) 

service.js

.factory('SportsFactory', function($http, $q, AuthFactory, 
      LocalForageFactory, LeaguesFactory, CONSTANT_VARS) { 
    return { 
     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; 
     }, 
     getSportsWithLeagues: function(customer) { 
     var _this = this, 
      defer = $q.defer(), 
      rejection = function(err) { 
      defer.reject(err); 
      }, 
      sportsLength; 

     LocalForageFactory.retrieve(CONSTANT_VARS.LOCALFORAGE_SPORTS_LEAGUES) 
      .then(function(sportLeagues) { 
      if (!_.isNull(sportLeagues)) { 
       //forcing array instead of object 

       sportLeagues = _.values(sportLeagues); 
       defer.resolve(sportLeagues); 
      }else { 
       _this.getSports(customer.agent).then(function(sports) { 
       sportsLength = sports.length; 
       LeaguesFactory.getLeagues({ 
        sportIds: _.pluck(sports, 'id'), 
        lineProfile: customer.lineProfile, 
        betLimit: customer.betLimit 
       }).then(function(leagues) { 
        _.each(sports, function(sport) { 
        sport.leagues = _.filter(leagues, function(league) { 
         return sport.id === league.sport.id; 
        }); 
        }); 
        //forcing array instead of object 
        sports = _.values(sports); 
        LocalForageFactory.set(CONSTANT_VARS.LOCALFORAGE_SPORTS_LEAGUES, sports); 
        defer.resolve(sports); 
       }, rejection); 
       }, rejection); 
      } 
      }, rejection); 
     return defer.promise; 
     } 
    }; 
    }); 

controller.js

.controller('SportsController', function($scope, $state, 
      AuthFactory, SportsFactory) { 
    $scope.sports = []; 
    $scope.customer = {}; 

    AuthFactory.getCustomer().then(function(customer) { 
     $scope.customer = customer; 
     SportsFactory.getSportsWithLeagues(customer).then(function(sports) { 
     $ionicLoading.hide(); 
     if (sports.length) { 
      $scope.sports = sports; 
     }else { 
      AuthFactory.logout(); 
     } 
     }, function(err) { 
     $ionicLoading.hide(); 
     console.log(err); 
     }); 
    }, function(err) { 
     $ionicLoading.hide(); 
     $state.go('app.login'); 
     console.log(err); 
    }); 

каковы ваши предложения?

Answer 1

может быть, вы должны разрешить службу в маршруте, вот пример:

views:{ 
    menuContent:{ 
     templateUrl:'templates/sportsList.html', 
     controller:'SportsController', 
     resolve: { 
     Sports: function(sportsService, $q) { 
      var defer = $q.defer(); 
      sportsService.getSports().then(function getAllSports(allSports) { 
      defer.resolve(allArticles); 
      }); 
      return defer.promise; 
     } 
     } 
    } 
    } 

, вызывайте Спорт разрешены в контроллере

.controller('SportsController', function($scope, Sports) { 
    $scope.sports = Sports 

Somethig, как это, это просто пример , вы должны также вызвать AuthFactory в решении.

Вот документация решимостью:

resolve documentation for ui-router

надеюсь, что это поможет, ура!

Answer 2

Автоответа только для будущих вопросов, правильный способ сделать это и избежать анти модели:

.state('app.sports', { 
    url:'/sports', 
    views:{ 
    menuContent:{ 
     templateUrl:'templates/sportsList.html', 
     controller:'SportsController', 
     resolve: { 
     Customer: ['AuthFactory', function(AuthFactory) { 
      return AuthFactory.getCustomer(); 
     }], 
     Sports: ['SportsFactory', 'Customer', function(SportsFactory, Customer) { 
      return SportsFactory.getSportsWithLeagues(Customer); 
     }], 
     Leagues: ['Sports', 'LeaguesFactory', function(Sports, LeaguesFactory) { 
      return LeaguesFactory.getLeagues(Sports); 
     }] 
     } 
    } 
    } 
})