Question

对于我的生活，我无法弄清楚如何根据从服务中返回的数据选择正确的选项。 “rides”返回正常并且div正常显示，但我的<select>没有更新或显示正确的预定过滤方法（对于另一个选择进行排序也是如此）。自动过滤器正在服务中发生，只需在完成后返回过滤器类型，以便能够更新HTML选择，以便向用户显示选择的过滤器方法。但SELECT只是显示一个未定义的选项。

控制台在服务中打印输出“[，undefined，undefined”，告诉我在完全返回promise之前执行。但是，一旦完全返回promise，$ scope.rides IS定义为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 & $scope.sort never update the UI View
      console.log(rides+ "," +rideFilter + " : " +rideSort) ;
      return [rides,rideFilter,rideSort] ;
    }

以上console.log，游乐设施最初返回[]，但是当$ q完成后，我可以看到游乐设施[]被填充并且模板视图已更新（已经正确排序/过滤）。 rideFilter和rideSort最初也会在同一个console.log中返回undefined，但即使在更新了游戏UI后，$ scope.filter和$ scope.sort也会保持空白。在第一次调用服务时，每次都会发生这种情况...但如果我从UI视图手动刷新Rides，在$ q甚至第二次启动所有承诺之前，我会看到$ scope.filter和$ scope。 sort填充UIView-它告诉我第一次调用时的值是存在的，现在它们在第二次调用启动时从缓存中检索，但在它完全更新/更改所有值之前...

Answer 1

我建议稍微改变（假设过滤器是乘坐类型）：

删除select：

上的事件

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

ng-select不更新硬列表默认选项

1 个答案: