javascript - 在 HTTP 仍在进行时进行过滤 Angular

Question

我遇到了问题，但我无法解决它。

我发送一个 http 请求，从 API 检索数据。这可能最多需要 15 秒。但我实现了一个缓存，以便用户可以看到已经到达的部分数据。每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$ 作为价格数组的最小值和最大值。然后我的过滤器( slider )在此区间内移动。但现在假设用户只接受 800 作为最高价格。然后他使用 slider ，显示的数据就会更新。

然后数据更新，因为我从服务器收到新数据。现在假设实际最大值为 1400$。然后 slider 的范围将从 100 到 1400。同样发生的情况是 slider 设置为此状态，并且我希望 slider 保持在 800 美元的最大值。

我的问题是，每次 $scope.data 更新时(因为它在监视函数中，并且 maxValue 也在那里)，我无法根据用户的需要保存状态。

如果过滤器的状态被用户更改而不是通过 $scope.data 的更新更改，如何才能仅保存它？

Answer 1

您的范围内需要另一个属性，例如$scope.selectedMaxValue。该属性将包含用户选择的最大值。如果它与更新前的 $scope.maxValue 不同，并且与 $scope 相同，则不应更改 $scope.selectedMaxValue。 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();
}