Class = & ldquo; ng-hide & rdquo; to be added automatically if I use ng-show with the correct syntax

advertisements

I need to show/hide tr tag of a table as per the scope value in the controller. I have written the code as shown below but class="ng-hide" gets appended everytime with tr tag automatically though I have declared my ng-show with correct syntax.

<div ng-show="IsParentExist">
  <table>
    <thead>...</thead>
       <tbody>
           <tr ng-show="noValueExist">
              <span>There are no records to show here..</span>
           </tr>
           <tr ng-repeat....>
              <td> </td>
           </tr>
        </tbody>
    </table>
 </div>

Here is a problem when it gets rendered in DOM as below

<div ng-show="IsParentExist">
 <span>There are no records to show here..</span>
  <table>
    <thead>...</thead>
       <tbody>
           <tr class="ng-hide" ng-show="noValueExist">
           </tr>
           <tr ng-repeat....>
              <td> </td>
           </tr>
        </tbody>
    </table>
 </div>

I have assigned the scope variable in controller as below

$scope.noValueExist = true;


Try replacing ng-show="noValueExist" by ng-hide="!noValueExist"

<tbody>
    <tr ng-hide="!noValueExist">
        <td>There are no records to show here.</td>
    </tr>
    <tr>
        <td></td>
    </tr>
</tbody>

In your controller, initialize your value.

$scope.noValueExist = false;

And when you need to show your <tr> element set this value to true.

$scope.noValueExist = true;

I hope this will help you.