Question

我对Angular上的过滤器有一个很大的问题，显而易见：输入搜索并附带过滤器。

if you see this example, is exactly what I want

实际上我用我的应用程序的真实信息做了那个Plnkr。您可以搜索体育和他的联赛，但在我的应用程序中你不能，你可以只搜索体育，一旦你尝试搜索任何联赛，该应用程序返回一条消息＆＃34;与任何搜索都不匹配标准＆＃34; ，下面我将列出有关此问题的所有代码，有人说这可能是路由问题，或者我错过了决心或类似的东西，这就是我在这里的原因，因为我需要你的帮助。另外，我录制了一个VIDEO，让您更容易理解，正如您在视频中看到的那样，如果我放置＆＃34;大学＆＃34;过滤器有效，但下面有2个以＆＃34; ncaa＆＃34;开头的联赛，如果我键入＆＃34; ncaa＆＃34;然后显示空消息。这很奇怪，因为在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;
        }
      }
    }
  }

然后在控制器中调用Sports已解决

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

过滤Angular的问题

2 个答案: