Фильтрация в то время как HTTP все еще продолжается Угловое

Question

У меня проблема с I, и я не могу обернуть вокруг себя голову.

Я отправляю запрос 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.

EDIT: Вот пример того, как вы можете это сделать.

Вы можете написать следующую функцию

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(); 
}