CODEWITHSUNDEEP
angularjsng-showng-hide
Srivathsa
Srivathsa

Reputation: 1

Hide multiple <TR> in table using same condition in Angularjs

I want to use same ng-show condition in more than 7-8 table rows of a table. I dont want to repeat the ng-show="same condition" in all 7-8 tr elements. is there any way i can put the condition in top level?

Below is my code, here sometimes both condition1 and condtion2 are true and sometimes only condition1 is true and some time only condition2 is true I dont want to repeat conditions everytime.

 <table>
     <tr ng-show="condition1" >
       <td>test1 </td><td>some value</td>
    </tr> 
    <tr ng-show="condition1" >
       <td>test2</td><td>some value</td>
   </tr> 
    <tr ng-show="condition2" >
       <td>test3</td><td>some value</td>
   </tr> 
    <tr ng-show="condition2" >
       <td>test4</td><td>some value</td>
    </tr> 
    <tr ng-show="condition2" >
       <td>test5</td><td>some value</td>
    </tr> 
    <tr ng-show="condition2" >
          <td>test6</td><td>some value</td>
   </tr> 
</table>

Upvotes: 0

Views: 928

Answers (2)

mahesh kukrani
mahesh kukrani

Reputation: 1

Try


  <table>
         <tr>
           <td>test1 </td><td>some value</td>
        </tr> 
        <tr>
           <td>test2</td><td>some value</td>
       </tr> 
     <tbody ng-show="condition2">
        <tr>
           <td>test3</td><td>some value</td>
       </tr> 
        <tr>
           <td>test4</td><td>some value</td>
        </tr> 
        <tr>
           <td>test5</td><td>some value</td>
        </tr> 
        <tr>
              <td>test6</td><td>some value</td>
       </tr> 
     </tbody>
    </table>

Upvotes: 0

Vipul Agarwal
Vipul Agarwal

Reputation: 1611

You can try the below way (instead of div try with span as well):

    <table>
      <div ng-show="condition1">
         <tr>
           <td>test1 </td><td>some value</td>
        </tr> 
        <tr>
           <td>test2</td><td>some value</td>
       </tr> 
     </div>
     <div ng-show="condition2">
        <tr>
           <td>test3</td><td>some value</td>
       </tr> 
        <tr>
           <td>test4</td><td>some value</td>
        </tr> 
        <tr>
           <td>test5</td><td>some value</td>
        </tr> 
        <tr>
              <td>test6</td><td>some value</td>
       </tr> 
     </div>
    </table>

Upvotes: 0

Related Questions