Question

我知道这个主题有一些帖子，但我可以让这个具体的例子起作用，因为嵌套：

我有一个包含3级嵌套的常见问题解答，由ng-repeats渲染，如果查询没有返回任何问题，我想隐藏类别和子类别。

我做了一个小提琴，任何人都可以帮助我让这个工作吗？ 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/

Angular，当没有嵌套ng-repeat的子元素时隐藏父级

2 个答案: