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

我有一个按类别排序的列表。在每个类别下都有一个产品列表，我有一个搜索来过滤产品，它会像它应该显示的那样显示产品，但是当它显示时，连同匹配的产品，我也会得到空的类别标题，这些标题下没有任何产品。我知道我也需要对

#类别

应用一个过滤器，但我就是不知道我需要做什么才能得到它。任何指针都可能有用！谢谢

这就是我现在拥有的：

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

---

这应该会有更多帮助：

为演示创建一个小提琴或弹琴。