El contenido de ng-if aún se muestra si hago clic en el botón. Pero quiero que solo se muestre en una situación específica. En otra situación, el botón debería mostrar un <div> diferente
Pensé que la parte después ng-if se elimina en el DOM, por lo que me pregunto por qué es capaz de aparecer.
<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>El problema es que div no puede ser un elemento secundario de la table . Si desea ocultar la fila, debe eliminar el div y mover el ng-if al mismo tr .
Hacer
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>No
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>