angularjs - 过滤嵌套的 ng-repeat : Hide parents that don't have children

Question

我想从 JSON 文件制作某种项目列表。数据结构(年、月、项目)如下所示:

[{
    "name": "2013",
    "months": [{
        "name": "May 2013",
        "projects": [{
            "name": "2013-05-09 Project A"
        }, {
            "name": "2013-05-14 Project B"
        }, { ... }]
    }, { ... }]
}, { ... }]

我使用嵌套的 ng-repeat 显示所有数据，并使其可通过绑定(bind)到输入框查询的过滤器进行搜索。

<input type="search" ng-model="query" placeholder="Suchen..." />

<div class="year" ng-repeat="year in data | orderBy:'name':true">
     <h1>{{year.name}}</h1>

    <div class="month" ng-repeat="month in year.months | orderBy:sortMonth:true">
         <h3>{{month.name}}</h3>

        <div class="project" ng-repeat="project in month.projects | filter:query | orderBy:'name'">
            <p>{{project.name}}</p>
        </div>
    </div>
</div>

如果我现在输入“Project B”，所有空的父元素仍然可见。我怎样才能隐藏它们？我尝试了一些 ng-show 技巧，但主要问题似乎是，我无权访问有关父级过滤状态的任何信息。

这是一个演示我的问题的 fiddle :http://jsfiddle.net/stekhn/y3ft0cwn/7/

Answer 1

基本上，您必须过滤月份以仅保留至少有一个过滤项目的月份，并且您还必须过滤年份以仅保留至少有一个过滤月份的月份。

这可以使用以下代码轻松实现:

function MainCtrl($scope, $filter) {

    $scope.query = '';
    $scope.monthHasVisibleProject = function(month) {
        return $filter('filter')(month.children, $scope.query).length > 0;
    };

    $scope.yearHasVisibleMonth = function(year) {
        return $filter('filter')(year.children, $scope.monthHasVisibleProject).length > 0;
    };

在 View 中:

<div class="year" ng-repeat="year in data | filter:yearHasVisibleMonth | orderBy:'name':true">
             <h1>{{year.name}}</h1>

            <div class="month" ng-repeat="month in year.children | filter:monthHasVisibleProject | orderBy:sortMonth:true">

虽然这是非常低效的，因为要知道一年是否被接受，您需要过滤它的所有月份，并且对于每个月，您需要过滤它的所有项目。因此，除非性能足以满足您的数据量，否则您可能应该应用相同的原则，但每次修改查询时都要坚持每个对象(项目、月份、年份)的接受/拒绝状态。