Content of "Ng-If ="0" <div>" shows on un-"collapse"-CodePudding

The content of the ng-if still shows if I click the button. But I want it only to show in a specific situation. In another situation the button should unhide a different <div>

I thought the part after ng-if gets removed in the DOM, so I am wondering why it is even able to show up.

<tr>
  <td>{{approval_item.requested_for}}</td>
  <td><a data-toggle="collapse" data-target=".{{approval_item.document_id_number}}"><i ></i></a></td>
</tr>

<div ng-if="0">
  <tr >
    <td colspan="5">
      <tr >
        <td><b>Item / Service</b></td>
        <td><b>Quantity</b></td>
        <td><b>One-time Price</b></td>
        <td><b>Monthly</b></td>
        <td><b>Yearly</b></td>
      </tr>
      <tr  ng-repeat="requested_item in approval_item.request_ritms">
        <td><a href="{{requested_item.link}}">{{requested_item.name}}</a></td>
        <td>{{requested_item.quantity}}</td>
        <td>{{requested_item.price_string}}</td>
        <td>{{requested_item.price_monthly_string}}</td>
        <td>{{requested_item.price_yearly_string}}</td>
      </tr>
      <tr >
        <td></td>
        <td></td>
        <td><b>One-time Total</b></td>
        <td><b>Monthly Total</b></td>
        <td><b>Annually Total</b></td>
      </tr>
      <tr >
        <td></td>
        <td></td>
        <td>{{approval_item.price_string}}</td>
        <td>{{approval_item.price_monthly_string}}</td>
        <td>{{approval_item.price_yearly_string}}</td>
      </tr>
    </td>
  </tr>
</div>

CodePudding user response：

The problem is that div can't be a child of table. If you want to hide the row, you should remove the div and move the ng-if into the tr itself.

angular.module('myApp', [])
  .controller("Ctrl_List", ["$scope", function(s) {}])

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="myApp">
  <div  ng-controller="Ctrl_List">
    <table>
      <tr>
        <td>
          row 1
        </td>
      </tr>
      <tr ng-if="0">
        <td>
          row 2
        </td>
      </tr>
    </table>
  </div>
</div>

Don't

angular.module('myApp', [])
  .controller("Ctrl_List", ["$scope", function(s) {}])

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="myApp">
  <div  ng-controller="Ctrl_List">
    <table>
      <tr>
        <td>
          row 1
        </td>
      </tr>
      <div ng-if="0">
        <tr>
          <td>
            row 2
          </td>
        </tr>
      </div>
    </table>
  </div>
</div>

CodePudding user response：

I can't imagine why you'd want to hard code a literal into an ng-if like that, but to answer your question, the string "0" evaluates to truthy.