Блог

Ни за что на свете я не могу понять, как выбрать правильный вариант на основе данных, поступающих из службы. «поездки» возвращаются нормально, и div отображается правильно, но мой <select> не обновляет или не отображает правильный заранее определенный метод фильтрации (то же самое для другого выбора для сортировки). Автоматический фильтр выполняется в службе и просто возвращает тип фильтра, когда он выполнен, чтобы иметь возможность обновлять HTML select, чтобы он отображал пользователю, какой метод фильтра был выбран. но ВЫБОР просто показывает неопределенный параметр.

Консоль распечатывает в сервисе «[], undefined, undefined», который сообщает мне, что выполняется до полного возврата обещания. Однако, как только обещание будет полностью возвращено, $scope.rides будет определен, поскольку DIV заполняется просто отлично, так почему же SELECT не получает правильное значение, переданное ему?

HTML:

   <select id="rides_filterMenu" ng-model="filter" ng-change="doFilter(filter);">
  <option value="all">All</option>
  <option value="standard">Sedan</option>
  <option value="suv">SUV</option>
  <option value="limo">Limo</option>        
  </select>
<div ng-repeat="ride in rides">
    {{ride.name}} is a {{ride.type}}
</div>
  

Контроллер:

 .controller('RidesCtrl', function($scope,$interval,Rides,constants) {
    [$scope.rides,$scope.filter,$scope.sort] = Rides.all();
  

Обслуживание:

 .factory('Rides', function($http,$q,servicesA,servicesB,servicesC,servicesD,servicesE,serviceF) {
  var rides=[] ;
  var rideFilter;
  var rideSort ;

  function sortRides(sortBy) {
    // sort "rides" here before sending back to controller
  }
  function filterRides(filterBy) {
     // filter "rides" here before sending back to controller
  }
  function getRides() {
    rides = [] ;
    var rideCount = 0 ;

    $q.all([servicesA(),servicesB(),servicesC(),servicesD(),servicesE(),servicesF()]).then(function(response){
      var z=0 ;
      for (var y=0;y<response.length;y  ) {
        for (var x=0;x<response[y].length;x  ) { 
          response[y][x].rideID = z   ;
          rides.push(response[y][x]) ;
          if (response[y][x].isType == 1 || response[y][x].isType == 2) {
            rideCount   ;
          }
        }
      }

      //tInfo is a global var/obj
      if (rideSort) {
        sortRides(rideSort) ;
      } else {
        rideSort = getDB("userRidesSort") ;
        sortRides(rideSort) ;
      }

      if (rideCount < 7) {
        // override default filter if not enough services to show
        rideFilter = "all" ;
        filterRides(rideFilter) ;    
      } else {
        if (tInfo.totalRiders > 7) {
          // override default filter if too many passengers
          rideFilter = "limo" ;          
        } else if (tInfo.filterManual == 1) {
          // do nothing
        } else {
          // if not set, get it and set it.
          rideFilter = getDB("userRidesFilter") ;
        }
        filterRides(rideFilter) ;
      }
      // prints to console with correct values
      console.log("filter: " rideFilter  ", sort: "  rideSort) ;
    });
  }

  getRides() ;

  return {
    all: function() {
      // initially prints "[], undefined : undefined"
      // but when $q finishes $scope.rides populates the UI View
      // while $scope.filter amp; $scope.sort never update the UI View
      console.log(rides  ","  rideFilter   " : "  rideSort) ;
      return [rides,rideFilter,rideSort] ;
    }
  

выше console.log rides изначально возвращает [], но затем, когда $ q завершен, я вижу, что rides[] заполнен, а представление шаблона обновляется (уже правильно отсортировано / фильтровано). rideFilter и rideSort также изначально возвращаются undefined в том же console.log, но даже после обновления пользовательского интерфейса rides $scope.filter и $scope.sort остаются пустыми. При первом вызове служебных аттракционов это происходит каждый раз … но если я вручную обновляю аттракционы из представления пользовательского интерфейса, еще до того, как $ q начнет выполнять все обещания во второй раз, я вижу, что $scope.filter и $ scope.sort заполняют UIView, что говорит мне о наличии значенийс 1-го вызова, и теперь они извлекаются из кэша при запуске 2-го вызова, но до того, как он полностью обновит / изменит все значения..

Я предлагаю небольшое изменение (предположим, что фильтр относится к типу ride):

удаляет событие при выборе:

 <select id="rides_filterMenu" ng-model="filter">
    <option value="">All</option>
    <option value="standard">Sedan</option>
    <option value="suv">SUV</option>
    <option value="limo">Limo</option>        
</select>
  

а затем фильтруйте непосредственно по ng-repeat

 <div ng-repeat="ride in rides | filter: { type: filter}">
    {{ride.name}} is a {{ride.type}}
</div>