[英]Angular ng-show doesn't work if I add ng-if
I'm doing a web app with Angular which contains a table with a collapsable tr
. 我正在使用Angular做一个Web应用程序,其中包含带有可折叠
tr
的表。 But when I add some ng-if condition (if there are / are not data in the Array)the ng-show stops to work. 但是当我添加一些ng-if条件(如果数组中有/没有数据)时,ng-show停止工作。 This is the working code without the ng-if conditions: https://plnkr.co/edit/UPFF1RboN22RAVM8r18i?p=preview
这是没有ng-if条件的工作代码: https : //plnkr.co/edit/UPFF1RboN22RAVM8r18i?p=preview
<thead>
<tr role="row">
<th class="details-control sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 26px;">
<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Projects: activate to sort column descending" aria-sort="ascending" style="width: 306px;">Foods</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label=" EST: activate to sort column ascending" style="width: 84px;"><i class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i> Type</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Contacts: activate to sort column ascending" style="width: 107px;">Count</th>
</tr>
</thead>
<tbody ng-repeat="data in allData" >
<tr>
<td>
<div class="cursor-pointer" ng-click="rows = !rows">
<!-- <span class="fa" ng-class="{'fa-caret-down': rows, 'fa-caret-right': !rows}"></span> -->
<p>open</p>
</div>
</td>
<td>{{data.foodName}}</td>
<td></td>
<td>{{data.totalCount}}</td>
</tr>
<tr ng-repeat="a in data.avaiable" ng-show="rows" ng-if="allData && allData.length > 0">
<td></td>
<td></td>
<td>{{a.foodType}}</td>
<td>{{a.foodCount}}</td>
</tr>
This is the not-working code with the ng-if conditions. 这是带有ng-if条件的无效代码。 If you see at the plk https://plnkr.co/edit/IvlIXIfWpogNi5VXo2Eh?p=preview you can notice that the rows doesn't show.
如果在plk https://plnkr.co/edit/IvlIXIfWpogNi5VXo2Eh?p=preview上看到,您会注意到该行没有显示。 Why?
为什么?
Cosmin is right. Cosmin是正确的。
ng-if creates a new child scope. ng-if创建一个新的子范围。
you have to use $parent
to use parent variable which you are using inside ng-if
您必须使用
$parent
才能在ng-if
内部使用父变量
change you ng-click to : 将您更改为:
ng-click="$parent.rows = !rows"
To display No Data Found use other body in you table 要显示“未找到数据” ,请在表中使用其他正文
<tbody ng-repeat="data in allData" >
<tr ng-if="allData && allData.length > 0">
<td>
<div class="cursor-pointer" ng-click="$parent.rows = !rows">
<!-- <span class="fa" ng-class="{'fa-caret-down': rows, 'fa-caret-right': !rows}"></span> -->
<p>open</p>
</div>
</td>
<td>{{data.foodName}}</td>
<td></td>
<td>{{data.totalCount}}</td>
</tr>
<tr ng-repeat="a in data.avaiable" ng-show="rows" ng-if="allData && allData.length > 0">
<td></td>
<td></td>
<td>{{a.foodType}}</td>
<td>{{a.foodCount}}</td>
</tr>
</tbody>
<!-- If there are no data -->
<tbody ng-if="allData && (allData == null || allData.length == 0)">
<tr>
<td colspan="3"><span translate="generic.NO_DATA_FOUND">NO DATA FOUND</span></td>
</tr>
</tbody>
As per the understanding of your requirement if you just replace the code 根据您对要求的理解,如果您只是替换代码
ng-click="rows = !rows"
with ng-click="data.rows = !data.rows"
ng-click="rows = !rows"
和ng-click="data.rows = !data.rows"
and 和
ng-show="rows"
with ng-show="data.rows"
ng-show="rows"
和ng-show="data.rows"
it must work 它必须工作
The reason why it doesn't work is that ng-if creates a new child scope thus breaking the prototypical scope inheritance. 之所以不起作用,是因为ng-if创建了一个新的子作用域,从而破坏了原型作用域的继承。
Must reads in order to better understand this issue : 必须阅读以便更好地理解此问题 :
As a good rule of thumb, always use controller as syntax. 作为一个好的经验法则,请始终使用controller作为语法。 Here 's why you should use it.
这就是为什么您应该使用它。
A quick fix for you would be to access the rows
property from another object like this: ng-show="container.rows"
- this way you won't break the prototypical scope inheritance. 一个快速的解决方案是从另一个对象访问
rows
属性,例如: ng-show="container.rows"
-这样,您就不会破坏原型范围的继承。 See an working example here . 在这里查看工作示例。
If you need to check has data or not in allData
and based on allData
want to use ng-repeat
then use ng-if
condition in same element 如果您需要检查
allData
是否有数据,并且基于allData
要使用ng-repeat
在同一元素中使用ng-if
条件
<tbody ng-if="allData && allData.length > 0" ng-repeat="data in allData" >
instead of nested element <tr ng-if="allData && allData.length > 0">
而不是嵌套元素
<tr ng-if="allData && allData.length > 0">
And better to use data.rows
instead of rows
in ng-click
to set and in ng-show
to show specific data rows. 最好使用
data.rows
而不是ng-click
的rows
来设置,并在ng-show
中显示特定的数据行。 like: ng-click="data.rows = !data.rows"
and ng-show="data.rows"
例如:
ng-click="data.rows = !data.rows"
和ng-show="data.rows"
Total solution can be: 总体解决方案可以是:
<table>
<thead>
<tr></tr>
</thead>
<tbody ng-if="allData && allData.length > 0" ng-repeat="data in allData" >
<tr >
<td>
<div class="cursor-pointer" ng-click="data.rows = !data.rows">
<p>open</p>
</div>
</td>
<td>{{data.foodName}}</td>
.....
</tr>
<tr ng-repeat="a in data.avaiable" ng-show="data.rows" ng-if="data.avaiable && data.avaiable.length > 0">
....
<td>{{a.foodCount}}</td>
</tr>
</tbody>
<tbody ng-if="!allData || allData.length == 0">
<tr class="yourClass">
<td colspan="3">
<span translate="generic.NO_DATA_FOUND"></span>
</td>
</tr>
</tbody>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.