Issue
Before I could do something like this in 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>
This allows for the expand and collapse row to be repeated.
edit: please note ng-repeat-end is on the second tr element, allowing for pairs of tr elements to be repeated. If I didn't add the ng-repeat-start and end, I would not be allowed to use the second ng-repeat inside the resource-details element. ngFor does not allow for this behavior the same setup as angular 1.x
How can I accomplish this in Angular 2.0.1?
Solution
I figured this out after realizing I was using the wrong syntax.
So use the <template>
element like so to achieve 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>
Note the *ngFor
on the .resource-details
element inside the second tr
.
Everything works great.
Answered By - Garuuk
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.