0

私の人生では、サービスから返されるデータに基づいて正しいオプションを選択する方法がわかりません。「乗り物」は問題なく返され、divは適切に表示されますが、<select>適切な事前定義されたフィルター方法を更新または表示していません（別のソートの選択についても同じです）。自動フィルターはサービスで発生し、完了時にフィルター タイプを返すだけで、HTML 選択を更新できるため、選択されたフィルター メソッドがユーザーに表示されます。しかし、SELECTは単に未定義のオプションを示しています。

サービスのコンソール出力には、「[]、未定義、未定義」が出力されます。これは、プロミスが完全に返される前に実行中であることを示しています。ただし、promise が完全に返されると、DIV が問題なく入力されるため、$scope.rides IS が定義されます。では、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、rides は最初は [] を返しますが、$q が終了すると、rides[] が入力され、テンプレート ビューが更新されていることがわかります (既に適切に並べ替え/フィルター処理されています)。rideFilter と rideSort も最初はundefined同じ console.log に返されますが、rides UI が更新された後でも、$scope.filter と $scope.sort は空白のままです。サービス Rides への最初の呼び出しでは、これは毎回発生します...しかし、UI ビューから手動で Rides を更新すると、$q がすべての約束を 2 回目に開始する前に、$scope.filter と $scope が表示されます。 UIView を並べ替えます。これは、値が最初の呼び出しから存在し、2 番目の呼び出しが開始されたときにキャッシュから取得されることを示していますが、すべての値を完全に更新/変更する前に..

4

1 に答える 1

0

小さな変更をお勧めします (フィルターが乗車タイプであると仮定します):

選択時にイベントを削除します。

<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>
于 2016-10-05T13:22:44.943 に答える