AngularJS - 如果子節點循環爲空，則隱藏父元素（已過濾）

Question

我有一個嵌套循環，其中的子節點是由父節點作爲參數的篩選器函數構造的。我還有另一個只是進行文本比較的過濾器。這裏是例子

<div ng-repeat="group in groups"> 
    {{group.name}} 
    <div ng-repeat="material in materials | filter:filterByGroup(group) | filter:search "> 
    {{material.name}} 
    </div> 
</div> 

現在，我的問題是，當施加filter:search並篩選出特定組所有的結果，我想隱藏組（而不是離開空group.name掛無子元素）。

我沒有自己的組中的材料，所以我沒有在父ng-repeat範圍內的信息。現在的問題是，如果有一種方法可以讓我訪問嵌套NG重複，看到從父其計數和隱藏父如果該數爲0

UPDATE

這裏是一個小提琴更好解釋情況：fiddle

主要問題是我不想將我的材料與組關聯。我可以做到這一點，如果沒有別的工作，但它聽起來像一個重載（因爲我需要基本上篩選結果兩次），如果我可以通過檢查嵌套循環。

感謝

Answer 1

建議更清潔的解決方案HERE。

你需要做的是用一個ng-show/ng-if包裝相關區域，該表達式應用數據結構上的過濾器並提取長度。以下是它在您的示例中的工作原理：

<div ng-show="(materials | filter:filterByGroup(group)).length"> 
    <div ng-repeat="group in groups"> 
     {{group.name}} 
     <div ng-repeat="material in materials | filter:filterByGroup(group) | filter:search "> 
     {{material.name}} 
     </div> 
    </div> 
    </div> 

這樣可以在複雜結構由於過濾（例如，結果表。

Answer 2

如果你可以要求按組的材料，你希望這樣做，每個組反正，爲什麼不這樣做的時候了，當你初始化視圖，並建立與具有材料集團的範本？如果你能做到這一點，你可以使用ng-show來隱藏具有材質的組。

你似乎需要知道一個團隊有材料或不知何故？這裏有一個小提琴不知道多少故事背景：

<div ng-controller="MyCtrl"> 

    <div ng-repeat="group in groups"> 
     <div ng-show="groupHasMaterials(group)">{{group.name}}</div> 
     <div ng-repeat="material in materialsByGroup(group)"> 
      <div>{{material.name}}</div> 
     </div> 
    </div> 

</div> 


<script> 
var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 

    var groups = [ 
     {'name':'group one'}, 
     {'name':'group two'} 
    ]; 

    var materials = [ 
     {'name':'material1'}, 
     {'name':'material2'}, 
     {'name':'material3'} 
    ]; 

    $scope.groups = groups; 
    $scope.materials = materials; 

    $scope.groupHasMaterials = function(group){ 
     return $scope.materialsByGroup(group).length > 0;  
    } 

    $scope.materialsByGroup = function(group){ 
     return group.name === 'group one' 
      ? [materials[0], materials[1]] 
      : []; 
    } 
} 
</script> 

fiddle with groups

Answer 3

我已經看到了這個用例幾次，這裏是我的解決方案：

<div ng-repeat="group in groups"> 
    <div ng-repeat="material in materials | filter:filterByGroup(group) | filter:search "> 
     <span ng-show="$first"> 
      {{group.name}}<br/> 
     </span> 
     {{material.name}} 
    </div> 
</div> 

您可以使用$在ng-repeat範圍內的第一個或最後一個只顯示每個組的第一個和最後一個。如果沒有$優先，則不會顯示組名稱。

我實現了這個對我blog和更新您的提琴在這裏：http://jsfiddle.net/ke793/1/

我不知道這是否是最好的解決方法，但它似乎相當簡單，它的工作原理。我很想看看別人如何解決這個問題。

更新：剛剛意識到，您可以使用ng-if來防止組名在$first元素之外全部擊中dom。比ng-hide/ng-show稍微清潔一些，每次將display: none設置爲額外的頭文件。