Question

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

举个例子：如果我输入＆＃34; 3D＆＃34;在文本框中我不想得到＆＃34; Day parts＆＃34;和＆＃34;周部分＆＃34;下面列出的是因为他们在过滤后不再生孩子了。

<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

如果父级已应用于子级AngularJS，则对父级应用过滤器

1 个答案: