Привязка элемента управления диапазоном ввода с Angular. js без привязки значения после переустановки модели данных

Question

У меня есть список строк, каждая со своим ползунком / вводом диапазона.

<tr ng-repeat="(ndx, row) in filteredData track by $index">
  ...
  <td>
    <input type="range" class="range pull-left"
      ng-init="row.Qty"
      ng-model="row.Qty"
      style="font-size: .9em; padding: 8px 0px 0px 2px;"
      min="0"
      step="{{row.CaseQty}}"
      max="{{row.MaxQty}}" />
  </td>
  ...
</tr>
```

Эти данные инициализируются после того, как пользователь инициирует онлайн-поиск. Когда данные возвращаются, соответствующая коллекция инициализируется. Именно так я инициализирую filteredData в моем $scope объекте.

$scope.getCOOrders = function () {
    $scope.gridFilters.customerId = "";
    $http.post("...", {/*set filters*/})
       .success(function (data) {
          if (data.Status !== "OK") {
            $scope.error(data, data.StatusMessage);
            return;
          }
          $scope.data = data.Rows;
          $scope.filteredData = data.Rows;
        })
        .error(function (data) {
          $scope.error(data, "There was a problem getting the orders.");
        });
      };

Это работает. Для каждой строки, если для row.Qty есть ненулевое значение, он будет правильно инициализировать значение ползунка. Тем не менее, у меня есть несколько элементов управления, которые позволяют фильтровать из браузера, чтобы коллекция, используемая для строк, могла управляться локально. Вот почему таблица привязывается к скорости $scope.filteredData объекта, чем к объекту $scope.data.

Так выглядит метод фильтра. Первоначально он был однострочным, но я расширил его для проверки этих значений в Visual Studio.

$scope.filterGrid = function () {

  //I also added this line, just to clear the collection.
  //This did not help or change the results.
  $scope.filteredData = [];

  //NOTE: $scope.orderCheckFilters is just the method used to check the row values. It does not modify their values.
  var arr = $scope.data.filter($scope.orderCheckFilters);
  $scope.filteredData = arr;
};

Приведенный выше метод отфильтрует список, однако мои элементы управления диапазоном больше не показывают ползунки в правильном виде. положение значения на ползунке диапазона.

Вы можете спросить, есть ли вероятность, что фильтр удаляет значение из ограниченного поля? У меня есть ярлык рядом с каждым ползунком диапазона. Это обязательное значение всегда правильно. Однако ползунки не инициализируются только после того, как пользователь отфильтровывает список из браузера.

Кто-нибудь знает, почему это происходит и как я могу это исправить?

Answer 1

Один из подходов состоит в том, чтобы передать ng-repeat в выражение фильтра:

<tr ng-repeat="(ndx, row) in data | filter : predicateFn">
  ...
  <td>
    <input type="range" class="range pull-left"
      ng-model="row.Qty"
      style="font-size: .9em; padding: 8px 0px 0px 2px;"
      min="0"
      step="{{row.CaseQty}}"
      max="{{row.MaxQty}}" />
  </td>
  ...
</tr>

, где $scope.predicateFn - это функция с сигнатурой: функция (значение, индекс, массив). Функция предиката может использоваться для написания произвольных фильтров. Функция вызывается для каждого элемента массива, с элементом, его индексом и всем массивом в качестве аргументов.

Окончательный результат - это массив тех элементов, для которых предикат возвратил true.

Для получения дополнительной информации см.

• AngularJS filter Справочник по API фильтра
• Angular JS Руководство разработчика - фильтры

Answer 2

После строки ниже:

var arr = $scope.data.filter($scope.orderCheckFilters);
$scope.filteredData = arr;

Array.filter вернет новый объект, поэтому вы изменили ячейку памяти отфильтрованной информации, которая является отфильтрованной версией $ scope.data. На этом этапе он потерял всю информацию, которая есть в $ scope.filteredData до этой строки, а не в $ scope.data

Так что, как правило, фильтрованные данные и сами фильтры не могут быть в одном и том же object.

Позвольте константе $ scope.data, как вы все равно делаете, но используйте значения диапазона из $ scope.data и отдельно отфильтрованные данные.