如何根据 AngularJS 中的过滤结果更改类? [英] How to change class depending on filter result in AngularJS?
本文介绍了如何根据 AngularJS 中的过滤结果更改类?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我不知道如何根据过滤器的状态/结果更改类的样式.我的代码:
现在发生的是,样式列表"仍然存在,它有背景,因此即使过滤器中没有结果,背景仍然可见.
我希望我已经很好地解释了自己.
解决方案 您可以将过滤结果分配给一个中间变量,然后使用该变量有条件地应用您的类:
<div ng-class="{list:filteredItems.length}" style="margin-top: 30px;">
I cannot work out how to change the style of a class depending on the status/result of the filter. My code:
<div data-ng-if="search.length >= 3" >
<div data-ng-class="{list:true}" style="margin-top: 30px;">
<a class="item item_recipe" data-ng-repeat="item in items | nonBlankFilter:search | filter:search" data-ng-click="$emit('search.click',item.PK);">
<img class="thumbnail" src="images/thumbnails/{{item.THUMB}}">
<div class="title">{{item.TITLE}}</div>
</a>
</div>
What is happening now, is the style "list" is still there which has a background and thus the background is still visible, even when there is no results in the filter.
I hope I have explained myself well.
解决方案 You can assign your filter results to a intermediary variable and than use that variable to conditionally apply your class:
<div ng-if="search.length >= 3">
<div ng-class="{list: filteredItems.length}" style="margin-top: 30px;">
<a
class="item item_recipe"
ng-repeat="item in filteredItems = (items | nonBlankFilter:search | filter:search)"
ng-click="$emit('search.click',item.PK);"
>
<img class="thumbnail" src="images/thumbnails/{{item.THUMB}}">
<div class="title">{{item.TITLE}}</div>
</a>
</div>
</div>
这篇关于如何根据 AngularJS 中的过滤结果更改类?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文