在父項上應用篩選器（如果它已應用於兒童）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