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

Question

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.

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

Your help is very much appreciated.

Answer 1

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>