2015-05-15 4 views
1

HTMLсмарт-таблица нг повтора не делает динамические столбцы правильно

<table st-table="ApplicationData.displayedCollection" class="table table-striped" st-safe-src="ApplicationData.source"> 
    <thead> 
     <tr ng-repeat="col in ApplicationData.columns"> 
      <td st-sort="{{col.name}}">{{col.caption}}</td> 
     </tr> 
    </thead> 

JS

$scope.ApplicationData = { 
source: [], 
displayedCollection: [], 
columns: [{ name: 'APPLICATION_CODE', caption: 'Code', isSort: true }, 
     { name: 'APPLICATION_NAME', caption: 'Application', isSort: true }], 
}; 

выход

<table st-table="ApplicationData.displayedCollection" class="table table-striped" st-safe-src="ApplicationData.source"> 
    <thead> 
     <tr ng-repeat="col in ApplicationData.columns" class="ng-scope"> 
     <td class="ng-binding">Code</td></tr> 
     <tr ng-repeat="col in ApplicationData.columns" class="ng-scope"> 
     <td class="ng-binding">Application</td></tr> 
    </thead> 
</table> 

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

ответ

1

просто нужно немного изменить шаблон: переместить нг-повтора из <tr> и в <td>

изменения это:

<thead> 
    <tr ng-repeat="col in ApplicationData.columns"> 
    <td st-sort="{{col.name}}">{{col.caption}}</td> 
    </tr> 
</thead> 

, например, это:

<thead> 
    <tr> 
    <td ng-repeat="col in ApplicationData.columns">{{col.caption}}</td> 
    </tr> 
</thead> 

вот jsfiddle с этим кодом: https://jsfiddle.net/86y3yxmk/1/

Кроме того, это хорошо читать для чего вы, возможно, попытаетесь выполнить: https://www.codementor.io/debugging/4948713248/request-want-to-use-values-in-nested-ng-repeat

GL!

+0

уже решил эту проблему, но спасибо. – Megh