"Ng-If ="0" <div>" 的内容显示在 un-"collapse" 上
Posted
技术标签:
【中文标题】"Ng-If ="0" <div>" 的内容显示在 un-"collapse" 上【英文标题】:Content of "Ng-If ="0" <div>" shows on 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 中的内容..
【参考方案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>
【讨论】:
以上是关于"Ng-If ="0" <div>" 的内容显示在 un-"collapse" 上的主要内容,如果未能解决你的问题,请参考以下文章
jquery ajax 错误 "readyState":0,"responseText":"","status":0,&