Karthik Karthik - 15 days ago 5
AngularJS Question

How to use ng-if with tr tag along with ng-repeat?


Hi

Can someone help me on this? Below is my code and the problem explanation.


<table>
<thead>
<tr>
<th>Icon</th>
<th>Name</th>
<th>Details</th>
</tr>
</thead>

<tbody ng-repeat="category in editor.categories">
<tr>
<th>{{category.categoryName}}</th>
</tr>
<tr ng-repeat="feature in category.features"> // Question?
<td>{{feature.iconImg}}</td>
<td>{{feature.featureName}}</td>
<td>{{feature.details}}</td>
</tr>
<tr ng-if="feature.id==1"> // condition 1
</tr>
<tr ng-if="feature.id==2"> // condition 2
</tr>
</tbody>
</table>



Now, let me explain the problem. I have a group of Categories. Each and every category as a group of features.

Now my question is, how can these feature for every category can be displayed based on the ng-if condition.
i.e., the <tr> at condition 1 should be displayed only if feature.id==1 and same goes for condition 2 as well only if feature.id==2.



Q1. How do I include my ng-if condition based on the different conditions?





Your help is very much appreciated.

Answer

Use both ng-if and ng-repeat within one tag:

<tr ng-repeat="feature in features"
    ng-if="feature.id === 1" >
</tr>

Or, if you want to conditionally display some templates you may use ng-switch for example:

<tr
    ng-repeat="feature in features"
    ng-switch="feature.id" >
    <span ng-switch-when="1"></span>
    <span ng-switch-when="2"></span>
</tr>
Comments