Question

在我可以在Angular 1.x中做这样的事情之前：

<tbody>
    <tr class="resource-row" ng-click="expandRow(resource.id)" ng-repeat-start="resource in resources track by $index">
        <td>
            <a ng-bind="resource.id"></a>
        </td>
    </tr>
    <tr ng-repeat-end="" class="resource-sub-row" ng-show="resource.expand">
        <td colspan="4">
            <div class="resource-details" ng-repeat="details in resource.details">
                <div class="stream-data form-inline col-md-12">
                    <div class="col-md-12 form-group">
                        <label>Resource Details: </label>
                        <div>{{resource.level}}</div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</tbody>

这允许重复展开和折叠行。

编辑：请注意ng-repeat-end位于第二个tr元素上，允许重复成对的tr元素。如果我没有添加ng-repeat-start和end，我将不被允许在resource-details元素中使用第二个ng-repeat。 ngFor不允许此行为与angular 1.x

相同的设置

如何在Angular 2.0.1中完成此操作？

Answer 1

在意识到我使用了错误的语法后，我想到了这一点。

因此，使用像这样的元素来实现ng-repeat-start / end behavior

</template ngFor let-resource [ngForOf]="resources">
    <tr class="resource-row" ng-click="expandRow(resource.id)">
        <td>
            <a ng-bind="resource.id"></a>
        </td>
    </tr>
    <tr class="resource-sub-row" ng-show="resource.expand">
        <td colspan="4">
            <div class="resource-details" *ngFor="let details of resource.details">
                <div class="stream-data form-inline col-md-12">
                    <div class="col-md-12 form-group">
                        <label>Resource Details: </label>
                        <div>{{resource.level}}</div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</template>

注意第二个tr内的resource-details元素的* ngFor。一切都很好。

在Angular 2中重复开始/结束

1 个答案: