Question

我有按类别排序的列表。在每个类别下面是一个产品列表，我有一个搜索过滤产品，它显示产品，如它应该，但当它，以及匹配的产品，我也得到空的类别标题，不包括产品。它们下面有任何产品。我知道我也需要对#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>

Answer 1

使用 ng-show 并将过滤后的对象分配给临时变量，并在 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>

这应该有助于更多：How do I only show an element if nested ng-repeat is not empty?

角度过滤器 - 过滤产品和类别

1 个答案: