[英]Angular filter - filter both products and categories
我有按类别排序的列表。 在每个类别下都有一个产品列表,我有一个过滤产品的搜索,并按应有的方式显示了产品,但是当它与匹配的产品一起显示时,我还得到了一个空类别标题,其中没有他们之下的任何产品。 我知道我也需要对#category
应用过滤器,但是我根本无法弄清楚该#category
进行过滤。 任何指针都可能有用! 谢谢。
这就是我现在所拥有的:
<input type="text" ng-model="search.id" placeholder="Search" />
<div id="category" ng-repeat='category in data.categories'>
<div id="category_header">
<h2 id="{{category.id}}">
<a href="{{category.id}}" class="translatable">{{category.id}}</a>
</h2>
</div>
<div id="category_content">
<ul>
<li ng-repeat='project in category.projects | filter: search.id:strict' id="{{project.id}}">
<a href="{{project.source}}">
<img src="logos/{{project.id}}.png" alt="">
<span class="project">
<strong class="name" ng-model="p">{{project.name}}</strong>
<span class="translatable">search engine</span>
</span>
<span class="star star-off"></span>
</a>
</li>
</ul>
</div>
</div>
使用ng-show并将已过滤的对象分配给temp变量,然后在ng-show中进行检查。
<div ng-init='filtered=[]'>
<input type="text" ng-model="search.id" placeholder="Search" />
<div id="category" ng-show='filtered[key].length > 0'
ng-repeat='(key, category) in data.categories'>
<div id="category_header">
<h2 id="{{category.id}}">
<a href="{{category.id}}" class="translatable">{{category.id}}</a>
</h2>
</div>
<div id="category_content">
<ul>
<li
ng-repeat='project in filtered[key] = (category.projects | filter: search.id:strict)'
id="{{project.id}}">
<a href="{{project.source}}">
<img src="logos/{{project.id}}.png" alt="">
<span class="project">
<strong class="name" ng-model="p">{{project.name}}</strong>
<span class="translatable">search engine</span>
</span>
<span class="star star-off"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
这应该有更多帮助: 如果嵌套的ng-repeat不为空,如何仅显示元素?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.