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

Я использую Smart Table (последняя версия) и AngularJs (v. 1.2.16) для построения таблицы, используя два объекта: один для заголовка, а другой для содержимого таблицы. Моя проблема возникает при создании ячеек тела таблицы. Используя следующий код работает отлично:Создание строк тела таблицы с использованием ng-repeat

<tr ng-repeat="row in rowCollection"> 
    <td>{{row.productNumber}}</td> 
    <td>{{row.BuyIt}}</td> 
    <td>{{row.brand}}</td> 
</tr>

Но мне нужно, чтобы создать тело, как это:

<tr ng-repeat="row in rowCollection"> 
    <td ng-repeat="col in columns">{{value-to-show}}</td> 
</tr>

Мой объект находится это:

$scope.rowCollection = [{ 
    "productNumber": 5877, 
    "BuyIt": "Online", 
    "brand": "BrandA" 
}, { 
    "productNumber": 5743, 
    "BuyIt": "Online", 
    "brand": "BrandB" 
}]; 

$scope.columns = [{ 
    'colName': 'Product Number', 
    'Id': 'column1', 
    'className': '', 
    'skipNatural': true, 
    'sortDefault': 'reverse' 
}, { 
    'colName': 'Store or Online', 
    'Id': 'column2', 
    'className': '', 
    'skipNatural': true 
}, { 
    'colName': 'Brand', 
    'Id': 'column3', 
    'className': '', 
    'skipNatural': true 
}];

Как я могу получить правильное значение появиться в правой клетке?

У меня есть jsfiddle, который показывает проблему: ч ttp://plnkr.co/edit/aEfzzU?p=preview

Любая помощь очень ценится.

источник

2015-08-27 Gus Bend

Я не думаю, что понимаю, почему вам нужно перебирать столбцы внутри строк. Можете ли вы объяснить, почему первое опубликованное вами решение недостаточно для того, что вы хотите сделать? – GPicazo

Я нашел плункер с помощью smart-table и angularjs, который генерирует строки так, как я хотел: http://plnkr.co/edit/DRagFo?p=preview –

Вы можете изменить нг-повторить это:

<tbody> 
    <tr ng-repeat="row in rowCollection"> 
     <td ng-repeat="(key, value) in row">{{value}}</td> 
    </tr> 
    </tbody>

источник

2015-08-27 21:39:26

Он загружает данные, но не соблюдает порядок. Смотрите мой плункер: http://plnkr.co/edit/aEfzzU?p=preview –

Вы также можете расширить объекты в столбце, с которой свойство оно соответствует следующим образом:

<tr ng-repeat="row in rowCollection"> 
    <td ng-repeat="col in columns">{{row[col.property]}}</td> 
</tr>

Это также будет иметь хороший побочные эффекты:

Вы можете в своем заголовке использовать директиву st-sort для col.property, чтобы включить сортировку
Динамически изменить столбцы для отображения
Используйте объекты столбцов в конфигурации как для заголовка и тела
Использования на сложных объектах, который содержит больше свойств, чем вы заботитесь, чтобы показать!

источник

2015-09-18 10:51:40

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

ответ

Смежные вопросы