Angular - создайте динамический шаблон для ng-repeat для разных объектов - PullRequest
Новая
       6

Angular - создайте динамический шаблон для ng-repeat для разных объектов

0 голосов
/ 17 января 2019

Предположим, у меня есть массив объектов. Мне нужно динамически создать таблицу, используя ng-repeat. Дело в том, что я не хочу жестко кодировать каждое свойство объекта в html. Я создал массив, который содержит соответствующие ключи для текущего объекта (иногда входные данные могут быть разными). Как я могу создать ng-repeat, который будет работать над каждым объектом массива данных и печатать каждое свойство массива keys, который я создал ранее?

xlsxTableProps - это массив со строками, которые являются ключами каждого объекта внутри parsedXslxData массива объектов.

Вот как я создаю ключи для ввода (которые, опять же, могут отличаться каждый раз)
JS: 

    Object.keys(this.parsedXslxData[0]).forEach(key => {
        this.xlsxTableProps.push(key)
      });

HTML: 

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col" ng-repeat="header in $ctrl.xlsxTableProps">{{header}}</th>                        
        </tr>
    </thead>
    <tr ng-repeat="item in $ctrl.parsedXslxData">
        <td>{{$index}}</td>
        <td ng-repeat="tableItem in $ctrl.xlsxTableProps"></td>
        <td>{{item[{{tableItem}}]}}</td>
    </tr>
</table>

1 Ответ

0 голосов
/ 17 января 2019

Проблема с вашим синтаксисом здесь {{item[{{tableItem}}]}}, нет необходимости использовать дополнительную пару скобок. Просто используйте {{item[tableItem]}}.

...