有角时，如果没有带有嵌套ng-repeat的子元素，则隐藏父元素

Question

我知道有一些关于该主题的文章，但是由于嵌套，我可以使这个特定的示例正常工作：

我有一个由ng-repeats呈现的3级嵌套的FAQ，如果查询未返回任何问题，我想隐藏Category和Subcategory。

我做了一个小提琴，有人可以帮我做这个吗？ http://jsfiddle.net/Lp02huqm/谢谢！

HTML

<div ng-app="faqApp" ng-controller="FaqController">
    <input ng-model="query" type="text">
    <ul class="collapse-list">
        <li ng-repeat="category in faq | filter:matchEveryWord() | orderBy:rankOrder">       
            <h3>{{category.category}}</h3>
            <div>
                <ul>
                    <li ng-repeat="subcategory in category.subcategories | filter:matchEveryWord()">       
                        <h3>{{subcategory.subcategory}}</h3>
                        <div>
                            <ul>
                                <li ng-repeat="question in subcategory.questions | filter:matchEveryWord()">       
                                    <h3>{{question.question}}</h3>
                                    <div>{{question.answer}}</div>       
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
    </ul> 
</div>

使用Javascript：

var faqApp = angular.module('faqApp', []);

faqApp.controller('FaqController', ['$scope' , function ($scope){


$scope.faq = [
    {category: 'Category1',
     rank:2,
     subcategories: [
         {subcategory: 'Subcategory1',
          questions: [
              {
                  question: 'this is the first question',
                  answer: 'this is the answer on the first question'
              },
              {
                  question: 'this is the second question',
                  answer: 'this is the answer on the second question'
              }

          ]
         },
         {subcategory: 'Subcategory2',
          questions: [
              {
                  question: 'this is the first question of the second subcategory',
                  answer: 'this is the answer on the first question of the second subcategory'
              },
              {
                  question: 'this is the second question',
                  answer: 'this is the answer on the second question'
              }

          ]
         }
     ]
    },
    {category: 'Category2',
     rank:1,
     subcategories: [
         {subcategory: 'Subcategory3',
          questions: [
              {
                  question: 'Apple',
                  answer: 'the answer to apple'
              },
              {
                  question: 'Banana',
                  answer: 'the answer to banana'
              }

          ]
         },
         {subcategory: 'Subcategory4',
          questions: [
              {
                  question: 'this is the first question of subcategory 4',
                  answer: 'this is the answer on the first question of subcategory 4'
              }
          ]
         }
     ]
    }
];
    $scope.rankOrder = 'rank';
    $scope.query = '';




    $scope.matchEveryWord = function() {
        return function( item ) {
            var string = JSON.stringify(item).toLowerCase();
            var words = $scope.query.toLowerCase();

            if(words){
                var filterBy = words.split(/\s+/);
                if(!filterBy.length){
                    return true;
                }
            } else {
                return true;
            }

            return filterBy.every(function (word){

                var exists = string.indexOf(word);
                if(exists !== -1){
                    return true;
                }
            });

        };
    };
}]);

Answer 1

在您的li元素中，添加ng-show以仅在存在问题时显示子类别。 就像是：-

 <li ng-repeat="subcategory in category.subcategories | filter:matchEveryWord()" ng-show="areQuestionsPresent(subcategory)"> 

现在，在您的控制器中，定义一个areQuestionsPresent方法，该方法将评估是否存在任何问题：

$scope.areQuestionsPresent = function(category) {
    return category.questions.length > 0;
}

我很着急，否则会给出更多细节。 希望这可以帮助。

Answer 2

您可以尝试将两个循环嵌套在一起，并且只显示一次类别标题。 这会稍微改变您当前的设置（您可以放回列表，我使用了div因为它对我来说更快），但是它可以工作：

        <div ng-repeat="subcategory in category.subcategories | filter:matchEveryWord()">
            <ul>
                <li ng-repeat="question in subcategory.questions | filter:matchEveryWord()">

                     <h3 ng-if="$first">{{subcategory.subcategory}}</h3>

                     <h4 class="bullet">{{question.question}}</h4>

                    <div>{{question.answer}}</div>
                </li>
            </ul>
        </div>

我在这里更新了您的小提琴： http : //jsfiddle.net/Lp02huqm/5/