javascript - 智能表 ng-repeat 未正确呈现动态列

Question

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 来动态生成列，但是每次我尝试我都会得到动态生成的行。请查看我随附的代码并让我知道问题所在。

Answer 1

只需稍微编辑模板：将 ng-repeat 移出<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 -想要在嵌套 ng-repeat 中使用的值

GL！