Как я могу использовать "ui-scroll" с моими собственными данными?

Я пытаюсь создать в своем приложении функцию бесконечной прокрутки, но она выглядит немного абстрактно. Я хочу использовать ui-scroll, и эта скрипка показывает простой пример того, как это работает.

Я прочитал readme и просмотрел несколько примеров, также я интегрировал пример в свой проект и получил его в работу, но я не могу понять, как объединить это с данными из моей собственной базы данных.

У меня есть таблица базы данных под названием фильмы. У фильмов есть несколько значений, таких как title, release_date, image_url

Как бы я вставить эти данные в $scope.movieDataSource так что я могу использовать это на мой взгляд?

$http.get(('/movies.json'), {
    cache: true
  })
  .success(function(data, status, headers, config) {
    if (status == 200) {
      $scope.userMovies = data;
    } else {
      console.error('Error happened while getting the user list.')
    }
    $scope.movieDataSource = {
      get: function(index, count, callback) {
        var i, items = [$scope.userMovies], item;
        var min = 1;
        var max = 1000;

        for (i = index; i < index + count; i++) {
          if (i < min || i > max) {
            continue;
          }
          item = {
            title: $scope.userMovies.title,
            imageURL: $scope.userMovies.poster_path
          };
          items.push(item);
        }
        callback(items);
      }
    }
  });

Я пытался создать пример того, что я пытаюсь получить. Я использую http.get, чтобы заполнить мой userMovies область с записями из моей базы данных, и я хочу использовать эти записи в качестве элементов в movieDataSource,

Но когда я захожу на страницу, я ui-scroll добавляет результаты в контейнер, но не показывает содержимое.

<div class="imageCell ng-scope" ui-scroll="item in movieDataSource">
  <img title="">
</div>

Если я console.log("movieDataSource" + $scope.movieDataSource) это показывает мне movieDataSource[object Object],

Источник

2 ответа

Решение

Вы делаете это более сложным, чем необходимо. uiScroll директива является заменой ngRepeat, который принимает источник данных с 3 свойствами:

  • индекс указывает первую запрашиваемую строку данных
  • count указывает количество запрошенных строк данных
  • Успешная функция для вызова при получении данных. Реализация сервиса должна вызывать эту функцию при получении данных и передавать ей массив найденных элементов. Если никакие элементы не получены, пустой массив должен быть передан.

в вашем случае у вас есть массив предметов. Каждый раз index или же count изменения, success срабатывает, и эта функция должна возвращать подмножество вашего массива из index в index + count, Есть несколько способов сделать это. В примере, который вы опубликовали, используется цикл for для многократного добавления элементов в массив. Вы также можете использовать Array.slice() метод.

Опция 1:

 $scope.movieDataSource = {

   get: function(index, count, callback) {
     var i, items = [], item;

     for (i = index; i < index + count; i++) {
       item = $scope.userMovies[i];
       items.push(item);
     };

     callback(items);
   }
 }

Вариант 2:

 $scope.movieDataSource = {

   get: function(index, count, callback) {
     var items = $scope.userMovies.slice(index, index + count);
     callback(items);
   }
 }

Что касается вашего HTML, он должен быть таким же, как если бы вы использовали ng-repeat:

<div ui-scroll="item in movieDataSource">
  {{item.title}}
  <img title="{{item.title}}" ng-src="{{item.poster_path}}"></img>
</div>
Источник

По-видимому, ui-scroll вызывает данный объект "movieDataSource" с индексом и счетчиком. Затем он ожидает, что функция выдвинет все элементы между index и index + count в возвращенном массиве.

Это означает, что вам нужно реализовать код, который выбирает соответствующие элементы из вашей БД (через REST или как бы вы ни обращались к вашим данным) и вставляете возвращенные записи в массив элементов.

Источник
Другие вопросы по тегам