过滤器的问题与角 [英] Filters issue with Angular

问题描述

我有一个角上的过滤器一个大一点的问题，要明确：输入搜索附有过滤器

I have a big little issue with the filters on Angular, to be explicit: input search with a filter attached.

如果你看到这个例子，正是我想要

其实我这样做，Plnkr与我的应用程序的真实信息。您可以通过体育和他的联赛搜寻，但在我的应用程序，你不能，你可以通过运动搜索，一旦你尝试搜索任何联赛，应用程序返回的消息不匹配任​​何搜索条件，下面我会把所有的code关于这个问题，有人说这可能是一个路由问题，或者，我错过了解决或类似的东西，这就是为什么我在这里，是因为我需要你的帮助。此外，我记录了影片对你来说更容易理解，因为你看到视频，如果我把大学过滤作品，但下面有2个联赛开始，NCAA，如果我输入NCAA，那么空消息出现。这是奇怪，因为在Plnkr例如一切工作正常。

actually I did that Plnkr with the real information of my app. You can search through sports and his leagues, but in my app you can not, you can just search through the sports and once you try to search any leagues, the app returns a message "did not match any search criteria", below I will put all of the code regarding this issue, someone says it could be a routing issue or that I am missing a resolve or something like that, that's why I am here, because I need your help. Also I recorded a VIDEO for you to understand easier, as you see on the video if I put "college" the filter works, but below there are 2 leagues starting with "ncaa", if I type "ncaa" then the empty message shows up. It is weird because in the Plnkr example everything works properly.

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);
    });

你有什么建议吗？

what are your suggestions ?

推荐答案

也许你应该解决的路线服务，这里有一个例子：

maybe you should to resolve the service in the route, here is an example:

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

然后只需调用体育在你的控制器解决

Then just call Sports resolved in your controller

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

Somethig那样，这只是一个例子，你应该打电话给AuthFactory的决心也是如此。

Somethig like that, this just an example, you should to call the AuthFactory in the resolve as well.

下面是解决的文档：

决心文档

希望这有助于，干杯！

这篇关于过滤器的问题与角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！