如果已将过滤器应用于子级AngularJS，则在父级上应用过滤器

Question

我有一个包含项目的列表，并已按文本框中的值对这些项目应用了过滤器。如果父项至少有一个过滤项，我想获得包含父项及其子项的新过滤列表。如果没有，则不应显示该父项。

例如：如果我在文本框中输入“3D”，我不想得到下面列出的“日部分”和“周部分”，因为它们在过滤后不再有孩子。

<div ng-controller="Ctrl">
 <input type="text" data-ng-model="inputValue.name"/>
<ul data-ng-repeat="condition in conditions">

        <div data-ng-click="setHeadingStatus(condition)">
            <div>
                {{condition.name}}
            </div>
        <li ng-repeat="item in condition.items | filter:inputValue">

                    <div class="custom-typeahead-list-title">{{item.name}}</div>
                    <div class="custom-typeahead-list-desc">{{item.description}}</div>

        </li>
            </div>
</ul>

function Ctrl($scope , $filter){

$scope.countryCode = 1;

$scope.conditions = [
{
    "id": 1,
    "name": "Experiences",
    "expanded": false,
    "items": [
        {
            "id": 1,
            "name": "3D"

        },
        {
            "id": 2,
            "name": "Imax"
        },
        {
            "id": 3,
            "name": "D-Box"
        },
        {
            "id": 4,
            "name": "THX"
        }
    ]
},
{
    "id": 2,
    "name": "Day parts",
    "expanded": false,
    "items": [
        {
            "id": 1,
            "name": "Early Bird"
        },
        {
            "id": 2,
            "name": "Matinee"
        },
        {
            "id": 3,
            "name": "Last Night"
        }
    ]
},
{
    "id": 3,
    "name": "Week parts",
    "expanded": false,
    "items": [
        {
            "id": 1,
            "name": "Monday"
        },
        {
            "id": 2,
            "name": "Wednesday"
        },
        {
            "id": 3,
            "name": "Weekend"
        }
    ]
} 
  ]

}

这是它的例子
http://jsfiddle.net/KJ3Nx/48/

Answer 1

您可以在显示每个块的div上放置一个ng-show，并将表达式设置为过滤后的长度；

<div data-ng-show="(condition.items | filter:inputValue).length > 0" data-ng-click="setHeadingStatus(condition)">

Updated fiddle