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

Question

I have list that is sorted by categories. Under each category is a list of products, I have a search that filters the products and it displays the products like its supposed to, but when it does, along with the matched products, I also get the empty category headers that don't have any products under them. I understand I need to apply a filter to the #category as well, but I simply can't figure out what I need to be doing to get it. Any pointers could be useful! Thanks.

This is what I have now:

<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

use ng-show and assign filtered objects to a temp variable, and check it in 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>

This should help more: How do I only show an element if nested ng-repeat is not empty?