AngularJS - ẩn phần tử cha nếu vòng lặp con trống (được lọc)

Question

Tôi có một trường hợp mà trong đó tôi có vòng lặp lồng nhau trong đó lớp con được xây dựng bởi hàm lọc lấy phụ huynh làm đối số. Tôi cũng có một bộ lọc khác mà chỉ cần so sánh văn bản. Dưới đây là ví dụ

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

Bây giờ, vấn đề của tôi là khi filter:search được áp dụng và nó lọc ra tất cả các kết quả trong nhóm cụ thể, tôi muốn che giấu nhóm (và không để lại trống group.name treo mà không cần yếu tố con).

Tôi không có tài liệu trong nhóm, vì vậy tôi không có thông tin đó trong phạm vi ng-lặp gốc của phụ huynh. Câu hỏi đặt ra là nếu có một cách tôi có thể truy cập vào lồng ng-repeat và xem tính của nó từ cha mẹ và giấu phụ huynh nếu đếm đó là 0.

CẬP NHẬT

Đây là một fiddle rằng tốt hơn giải thích tình huống: fiddle

Vấn đề chính là tôi không muốn kết hợp tài liệu của mình với các nhóm. Tôi có thể làm điều đó nếu không có gì khác hoạt động, nhưng nó có vẻ như quá tải (vì sau đó tôi sẽ cần phải lọc kết quả về cơ bản hai lần) nếu tôi có thể làm điều đó bằng cách chỉ kiểm tra vòng lặp lồng nhau.

Cảm ơn

Answer 1

Một giải pháp sạch hơn đã được đề xuất HERE.

Những gì bạn cần làm là bọc khu vực liên quan bằng ng-show/ng-if dựa trên biểu thức áp dụng bộ lọc trên cấu trúc dữ liệu và trích xuất độ dài.Dưới đây là cách hoạt động trong ví dụ của bạn:

<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> 

Điều này cho phép bạn ẩn cấu trúc phức tạp khi chúng bị trống do lọc, ví dụ: một bảng kết quả.

Answer 2

Nếu bạn có thể yêu cầu những tài liệu theo nhóm và bạn mong đợi để làm điều đó cho từng nhóm dù sao, tại sao lại không làm điều đó ngay lập tức khi bạn khởi tạo quan điểm và xây dựng một mô hình với các nhóm mà có tài liệu? Nếu bạn có thể làm điều đó bạn có thể sử dụng ng-show để chỉ ẩn các nhóm có vật liệu.

Bạn dường như cần biết rằng một nhóm có tài liệu hay không bằng cách nào đó? Dưới đây là một fiddle mà không biết nhiều về những câu chuyện nền:

<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

Tôi đã nhìn thấy use-case này một vài lần, đây là giải pháp của tôi:

<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> 

Bạn có thể sử dụng $ đầu tiên hoặc $ cuối cùng trong phạm vi của ng-lặp lại để chỉ hiển thị cho người đầu tiên và cuối cùng của mỗi nhóm. nếu không có $ đầu tiên, nó sẽ không hiển thị tên nhóm.

tôi chỉ thực hiện điều này trên blog tôi và cập nhật fiddle của bạn ở đây: http://jsfiddle.net/ke793/1/

Tôi không chắc chắn nếu điều này là giải pháp thanh lịch nhất, nhưng có vẻ như khá đơn giản và nó hoạt động. Tôi rất muốn xem cách người khác giải quyết vấn đề này.

Cập nhật: chỉ cần nhận ra rằng bạn có thể sử dụng ng-if để ngăn tên nhóm thoát khỏi mái vòm bên ngoài phần tử $first. Ít hơn một chút so với ng-hide/ng-show, mỗi lần đặt display: none thành tiêu đề phụ.