雖然HTTP仍在進行過濾角

Question

我得到了我的問題，我不能包裹我的頭。

我發送一個http請求從API中檢索我的數據。這可能需要高達15 seconds。但是我實現了一個緩存，以便用戶可以看到已經到達的部分數據。每1500ms我更新此數據。一旦data.length>0，我向用戶顯示過濾器，以便他可以按價格過濾他的結果。

當他應用濾波器時，每次更新數據後所有濾波器都會恢復到原始狀態。

$scope.$watch('trainRequest.getRequest()',function(newVal,oldVal){ 
     $scope.data = trainRequest.getRequest(); 
     $scope.trainArray = resultService.trainArray; 


     if($scope.data.error!==1){ 
// here I generate the minimum and maximum price in the data that I use to show the filter. 
$scope.maxValue=(function(){ 
      var tempArray=[]; 
      for(var i=0;i<$scope.data.length;i++){ 
       tempArray.push($scope.data[i].price); // jshint ignore:line 
      } 
      return tempArray.length>0 ? Math.round(Math.max.apply(Math, tempArray)) : 5000; 
      })(); 

      $scope.minValue=(function(){ 
      var tempArray=[]; 
      for(var i=0;i<$scope.data.length;i++){ 
       tempArray.push($scope.data[i].price); // jshint ignore:line 
      } 
      return tempArray.length>0 ? Math.round(Math.min.apply(Math, tempArray)) : 0; 
      })(); 
} 

這是我的問題。假設數據提供100$和1000$作爲價格數組的最小值和最大值。然後我的過濾器（滑塊）在此間隔中移動。但現在讓我們說，用戶只接受800作爲最大價格。然後他使用滑塊並顯示更新的數據。

然後數據更新，因爲我從服務器接收新數據。現在我們來說實際的最大值是1400$。然後滑塊範圍從100到1400。事情發生的是，滑塊設置爲這種狀態，我希望滑塊保持在800 $最大值。

我的問題是，每次$scope.data更新（因爲它在監視功能和maxValue也存在），我不能夠保存用戶所需的狀態。

如何才能保存過濾器的狀態，如果它由用戶更改而不是更新$scope.data？

Answer 1

您需要其他屬性，例如： $scope.selectedMaxValue。該屬性將包含用戶所選的最大值。如果它與更新前的$scope.maxValue不同，則不應更改$scope.selectedMaxValue，如果它與$scope.maxValue相同，則應更新它。

你也可以用這種方法爲minValue。

編輯： 下面是一個如何做到這一點的例子。

您可以編寫以下功能

function updateMaxValue(){ 
    var tempArray=[]; 
      for(var i=0;i<$scope.data.length;i++){ 
       tempArray.push($scope.data[i].price); // jshint ignore:line 
      } 
      var newValue = tempArray.length>0 ? Math.round(Math.max.apply(Math, tempArray)) : 5000; 

    if($scope.selectedMaxValue === $scope.maxValue) 
    { 
     $scope.selectedMaxValue = newValue; 
    } 

    $scope.maxValue = newValue; 
} 

而且使用這個

$scope.$watch('trainRequest.getRequest()',function(newVal,oldVal){ 
     $scope.data = trainRequest.getRequest(); 
     $scope.trainArray = resultService.trainArray; 


     if($scope.data.error!==1){ 
     // here I generate the minimum and maximum price in the data that I use to show the filter. 
     updateMaxValue(); 

     updateMinValue(); 
}