如何根据过滤结果AngularJS改变类? [英] How to change class depending on filter result in AngularJS?

查看:144
本文介绍了如何根据过滤结果AngularJS改变类?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我不知道如何来改变这取决于过滤器的状态/结果一类的风格。我的code:

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆