использование ng-repeat для заполнения строк таблицы данными из массива

Question

использование ng-repeat для заполнения строк таблицы данными из массива

0

У меня есть функция JS, называемая current_item.get_user_history() которая возвращает массив, создавая и API-вызов, который выглядит примерно так:

things[0]:
 thing_id: 5
 user_id: 23
 paddle_no: 1234
 item_id: 893
 price: 5000

things[1]:
 thing_id: 4
 user_id: 67
 paddle_no: 6743
 item_id: 893
 price: 4500

... and so on

Я хочу получить данные из этого массива, чтобы заполнить таблицу, используя ng-repeat.

<div class="bid_history">
      <table>
        <tr>
          <th>
            Column 1
          </th>
          <th>
            Column 2
          </th>
          <th>
            Column 3
          </th>
        </tr>
        <tr ng-repeat="thing in current_item.get_user_history() track by thing.id">
        {{thing.user_id}} {{thing.price}}
        </tr>

      </table>
  </div>

По какой-то причине ничего не получается, и, похоже, он много повторяет, потому что я получаю неудержимое количество ошибок в хром-консоли. Любая помощь приветствуется, чтобы точно объяснить, как использовать ng-repeat.

Zack Herbert 25 март 2016, в 21:27

Источник

1

Обычно рекомендуется не перебирать результаты функции, а вместо этого использовать функцию для присвоения переменной области, а затем перебирать ее.
Harris 25 март 2016, в 19:39
0

хорошо, я попробую это
Zack Herbert 25 март 2016, в 19:40
0

Можете ли вы опубликовать ошибки, если они не решены?
Thalaivar 25 март 2016, в 20:22

Показать ещё 1 комментарий

Теги:

javascript

angularjs

3 ответа

2

Вы не можете использовать функцию, которая запускает $digest() (например, $http, $timeout) в ng-repeat. Он вызывает бесконечный цикл $digest().

Есть объяснения:

https://github.com/angular/angular.js/issues/705 или угловой бесконечный $ digest Loop в ng-repeat.

И я сделал ту же ошибку раньше :)

Бесконечный цикл, когда ng-repeat/ng-class вызывает функцию, которая вызывает $ http

Сначала необходимо сохранить current_item.get_user_history() данные current_item.get_user_history() а затем использовать ng-repeat для вызова данных.

scope.things= urrent_item.get_user_history();

<tr ng-repeat="thing in things track by thing.id">

6324 25 март 2016, в 19:32

0

Краткий ответ Не вызывайте функцию ngRepeat для возвращаемых элементов. Храните массив элементов в свойстве в области.

$scope.user_history = current_item.get_user_history();

Если на самом деле вам действительно нужно это сделать, вы можете исправить это одним из следующих:

Не создавайте новый объект при каждом вызове current_item.get_user_history().
Если вам нужно создать новые объекты, вы можете добавить к hashKey метод hashKey. См. Эту тему для примера.

Средний ответ. Обычно вы не хотите перебирать функцию в ng-repeat. Причина в том, что current_item.get_user_history() возвращает массив с новым объектом. Этот объект не имеет hashKey и не существует в кэше ngRepeat. Таким образом, ngRepeat на каждом watch.get создает новую область для него с новыми часами для {{thing.id}}. Эти часы на первом watch.get() имеют watch.last == initWatchVal. Итак, watch.get() != watch.last. Итак, $digest начинает новый траверс. Затем ngRepeat создает новую область с новыми часами и так далее. Затем после 10 траверсов вы получите сообщение об ошибке.

Long Answer Отметьте это сообщение для очень хорошо сделанного объяснения того, как это работает.

Justin Ober 25 март 2016, в 20:25

Ещё вопросы

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

Zack Herbert · Accepted Answer · 2016-03-29T11-22-00.000Z

Проблема заключалась в том, что цикл дайджеста возвращал обещание, и я должен был превратить его в объект.

Я изначально делал это:

my_api.get_user_history(self.id);

и пришлось добавить это к этой строке:

.then(function(data){self.user_history = data});

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