javascript - 如何在 AngularJS 中使用智能表创建扩展行？

Question

我一直在尝试以角度向我的智能表添加扩展面板。该表显示了单击输入按钮后显示的数据，我希望在每一行的侧面显示一个扩展按钮，以便我可以在下面显示其他数据。我一直在关注这个智能表示例：https ://plnkr.co/edit/W8S3EaDI9sxuj8IjHiCN?p=preview这正是我想要做的。但是，当我复制完全相同的代码时，它在我的角度版本中不起作用。演示代码似乎也是使用 Angular 版本 1 (AngularJS) 完成的。

<div ng-controller="safeCtrl" class="table_class">

    <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th st-ratio="20">#</th>
                <th st-sort="Delivered" style="color: white;">Delivered</th>
                <th st-sort="orgRadar" style="color: white;">Organization Radar</th>
                <th st-sort="root_build" style="color: white;">Root Build</th>
                <th st-sort="inserted_by" style="color: white;">Inserted By</th>
                <th st-sort="milestone" style="color: white;">Milestone</th>
                <th st-sort="applicable_chipsets" style="color: white;">Applicable Chipsets</th>
                <th st-sort="project_tag" style="color: white;">Project Tag</th>
                <th st-sort="gerrits" style="color: white;">Gerrits</th>
                <th st-sort="inserted_on" style="color: white;">Inserted On</th>
                <th st-sort="SDK" style="color: white;">SDK</th>
            </tr>
            <tr>
                <th colspan="10"><input st-search="" class="form-control"
                        placeholder="global search ..." type="text" /></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in displayedCollection" *ngFor="let item of newPost.posts">
                <td>
                    <button ng-if="row.expanded" ng-click="row.expanded = false"
                        class="btn btn-xs btn-default glyphicon glyphicon-chevron-down"></button>
                    <button ng-if="!row.expanded" ng-click="row.expanded = true"
                        class="btn btn-xs btn-default glyphicon glyphicon-chevron-right"></button>
                </td>
                <td style="color: red;">{{item.Delivered}}</td>
                <td style="color: red;">{{item.orgRadar}}</td>
                <td style="color: red;">{{item.root_build}}</td>
                <td style="color: red;">{{item.inserted_by}}</td>
                <td style="color: red;">{{item.milestone}}</td>
                <td style="color: red;">{{item.applicable_chipsets}}</td>
                <td style="color: red;">{{item.project_tag}}</td>
                <td style="color: red;">{{item.gerrits}}</td>
                <td style="color: red;">{{item.inserted_on}}</td>
                <td style="color: red;">{{item.SDK}}</td>
                <td>
                    <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
                        <i class="glyphicon glyphicon-remove-circle">
                        </i>
                    </button>
                </td>
            </tr>
            <tr ng-if="row.expanded" ng-repeat-end="">
                <td colspan="10">
                    <b>Original Radar<br /></b>
                </td>
                <td colspan="10" st-ratio="20">{{item.orgRadar}}</td>
            </tr>
        </tbody>
    </table>
</div>

我的当前输出： 我的当前输出

演示输出： 演示输出

如果有人可以帮助我解决这个问题，那就太好了。谢谢！

标签： javascriptangularjssmart-table