如何根据AngularJS中的过滤结果更改类?

时间:2013-12-19 17:06:20

标签: javascript angularjs angularjs-directive angularjs-ng-repeat angular-ui

我无法弄清楚如何根据过滤器的状态/结果更改类的样式。我的代码:

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

现在发生了什么,风格“列表”仍然存在背景,因此即使过滤器中没有结果,背景仍然可见。

我希望我能很好地解释自己。

1 个答案:

答案 0 :(得分:1)

您可以将过滤结果分配给中间变量,然后使用该变量有条件地应用您的类:

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