Question

我想创建一个包含两行的自定义行。一个可见，另一个崩溃。

这是我的表：

<table class="table table-bordered panel panel-default centered">
        <thead  class="panel-heading">
            <tr>
                <td>..</td>
                <td>..</td>
                <td>.. GENERALE</td>
                <td>..</td>
            </tr>
        </thead>
        <tbody>
            <table-row ng-repeat="(sottotarget,pubblicazione) in gestTrt.treat.pubblicazioni" sottotarget="sottotarget"></table-row>
        </tbody>
    </table>

我的指示是：</ p>

<tr>
<td>
    <div class="collapse navbar-collapse">
        <a ng-click="tableRow.rowVar = !tableRow.rowVar" role="button"><span class="glyphicon glyphicon-plus-sign"></span></a>
    </div>
</td>
<td>{{tableRow.sottotarget}}</td>
<td></td>
<td></td>
</tr>
<tr class="collapsed" ng-class="{'collapse' : !tableRow.rowVar}"><td><div>Should be collapsed</div></td></tr>

使用js代码：

export function tableRow(): angular.IDirective {

return {
  restrict: 'E',
   scope: {
    sottotarget: '=sottotarget'
  },
  templateUrl: '...',
  controller: TableRowController,
  controllerAs: 'tableRow',
  bindToController: true
};
}

export class TableRowController {
   public rowVar = false;
}

但是在我的页面中，我将两个指令可视化，然后是空表。

Answer 1

<div ng-app="" ng-controller="customersCtrl"> 

<table>

<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>


</tr>
</table>

</div>

Answer 2

我决定使用

<tbody ng-repeat="(sottotarget,pubblicazione) in gestTrt.treat.pubblicazioni">
            <tr>
                <td>
                    <div class="collapse navbar-collapse" ng-init="collapsed = true">
                        <a ng-click="collapsed = !collapsed" role="button"><span class="glyphicon glyphicon-plus-sign"></span></a>
                    </div>
                </td>
                <td>{{tableRow.sottotarget}}</td>
                <td></td>
                <td></td>
            </tr>
            <tr class="collapsed" ng-class="{'collapse' : collapsed}">
                <td colspan="4"><div>Should be collapsed</div></td>
            </tr>
        </tbody>

在ng-repeat表中使用指令

2 个答案: