ng-repeat элементы над вложенными объектами

Скажем, у меня есть литерал вложенного объекта, и я хочу отобразить его содержимое в таблице. Если объект имеет глубину 2 уровня, я могу использовать:

      <table>
          <thead>
            <tr>
              <td>key</td>
              <td>value</td>

            </tr>
          </thead>
          <tbody ng-repeat="(key01, value01) in data">
            <tr ng-repeat="(key02, value02) in value01">
                <td>{{key02}}</td>
                <td>{{value02}}</td>
            </tr>
          </tbody>
        </table>

Если у меня есть вложенный объект с глубиной 3 или 4 уровня, используя аналогичный метод, как мне отобразить данные в таблице? Лучшее, что у меня есть, это этот ранее отвеченный вопрос, однако я не хочу проводить эту логику в контроллере, как было предложено здесь.

Мне нужен способ вложения более 2 ng-Repeats, как показано выше, поскольку в моем приложении имена ключей являются переменными при генерации данных.

Пример 3-х уровневого объекта глубокого гнезда:

$scope.someVar =    { 'data': {
                              'A': {
                                     'x':'someValue'
                                   },
                               'B': {
                                     'y':'anotherValue'
                                    } 
                              }
                     }

html angularjs nested-loops angularjs-ng-repeat ng-repeat
person eric    schedule 27.11.2014    source источник
comment
Вы рассмотрели следующий подход с использованием шаблонов для рекурсии? stackoverflow.com/questions/15661289/   -  person Himmet Avsar    schedule 27.11.2014

Ответы (2)


arrow_upward
1
arrow_downward

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

Также следует сказать, что если вы помещаете много данных в эти вложенные ngRepeats, вы, скорее всего, замедлите работу браузера до непригодного для использования состояния.

Если вы действительно не можете сделать какое-то преобразование в контроллере (что проще в браузере, так как это делается один раз, а не каждый раз, когда что-то меняется...), вам придется использовать div с таблицей, такой как стиль. Попробуйте здесь (ссылка)

person Simeon Cheeseman    schedule 27.11.2014
comment
Большое спасибо! Причина использования вложенных ng-Repeats заключается в том, что при использовании Firebase API изменения в данных автоматически вносятся без необходимости писать дополнительные элементы управления. Я не знал, что когда это делается в контроллере, это делается только один раз, мне придется изучить это подробнее и посмотреть, будет ли firebase по-прежнему вставлять обновления в переформатированные данные, созданные в контроллере. Кроме того, спасибо за совет по таблице стилей div. - person eric; 27.11.2014
comment
Пожалуйста. Я должен упомянуть, что мое предположение о том, что сделано один раз, было почтой HTTP или чем-то подобным, в результате чего вы должны были бы выполнить преобразование один раз при загрузке данных. Если вы используете firebase с асинхронным типом, мой совет может быть немного неверным, так как вам, вероятно, придется переформатировать каждый раз, когда что-то меняется. Если у вас есть другие проблемы, вероятно, было бы лучше опубликовать этот вопрос как более конкретную проблему Firebase/AngularJS, поскольку кто-то другой, вероятно, сталкивался с ней раньше. - person Simeon Cheeseman; 28.11.2014
comment
Спасибо за это, вопрос был размещен здесь: stackoverflow.com/q/27179400/4286092 - person eric; 28.11.2014

arrow_upward
0
arrow_downward

ты должен делать что-то вроде этого

$scope.someVar = { 'data': {
     'A': {
          'x':'someValue'
           },
     'B': {
         'y':'anotherValue'
           } 
}

тогда вы должны использовать ng-repeat вот так,

<tbody ng-repeat="(key01, value01) in someVar.data">
        <tr ng-repeat="(key02, value02) in value01">
person Kalhan.Toress    schedule 27.11.2014
comment
На самом деле я ищу способ вложения более чем 2 ng-Repeats вместе, так как этот подход не будет работать для моего конкретного приложения, поскольку имена ключей (в данном случае ключ «данные») являются переменными при генерации someData. Вопрос обновлен, и спасибо за ваше предложение! - person eric; 27.11.2014