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

【问题标题】：Content of "Ng-If ="0" <div>" shows on un-"collapse""Ng-If ="0" <div>" 的内容显示在 un-"collapse" 上
【发布时间】：2022-01-18 12:48:13
【问题描述】：

如果我单击按钮，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>

【问题讨论】：

您有使用AngularJS 的特定理由吗？这是一个死项目，取而代之的是Angular。
这正是 ng-if 所做的 (codepen.io/moshfeu/pen/JjrWGaa)。你能在控制台中看到错误吗？
@jabaa 我正在使用它在 ServiceNow 中工作，他们使用 AngularJS
@moshfeu 不幸的是，日志中没有错误。它只显示 div 中的内容..

标签： javascript html angularjs

【解决方案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>

【讨论】：