4

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.

Josh
  • 3,385
  • 5
  • 23
  • 45
Karthik
  • 1,064
  • 2
  • 16
  • 33
  • looks like ng-repeat-start, ng-repeat-end better suit for your html structure though. – YOU Sep 09 '15 at 03:45

2 Answers2

3

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>
Girafa
  • 3,370
  • 3
  • 18
  • 33
  • Would this cause the 's in your second example to actually get rendered to the DOM? If so, is that valid HTML (having a span directly inside a tr without a td?) – Adam Plocher Sep 11 '16 at 02:39
3

check ng-switch and ng-switch-when

https://docs.angularjs.org/api/ng/directive/ngSwitch

Regards

z0r0
  • 666
  • 4
  • 14