"Ng-If ="0"的内容<div>显示在un-"collapse"上

Question

如果单击按钮，ng-if的内容仍然显示。但我希望它只在特定的情况下表现出来。在另一种情况下，按钮应取消隐藏不同的<div>

我认为ng-if之后的部分会在DOM中被删除，所以我想知道为什么它能够出现。

<tr>
<td>{{approval_item.requested_for}}</td>
<td><a data-toggle="collapse" data-target=".{{approval_item.document_id_number}}"><i class="fa fa-trash"></i></a></td>
</tr>
<div ng-if="0">
<tr class="hide-table-padding collapse {{approval_item.document_id_number}}">
<td colspan="5">
<tr class="collapse {{approval_item.document_id_number}}">
<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 class="collapse {{approval_item.document_id_number}}" 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 class="collapse {{approval_item.document_id_number}}">
<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 class="collapse {{approval_item.document_id_number}}">
<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>

Answer 1

问题是div不能是table的子级。如果要隐藏该行，则应删除div并将ng-if移动到tr本身中。

执行

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 class="container" ng-controller="Ctrl_List">
<table>
<tr>
<td>
row 1
</td>
</tr>
<tr ng-if="0">
<td>
row 2
</td>
</tr>
</table>
</div>
</div>

不要

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 class="container" 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>