Lọc danh sách ng-repeat dựa trên một tài sản sub-object

jsfiddle http://jsfiddle.net/KfSBq/Lọc danh sách ng-repeat dựa trên một tài sản sub-object

By sub-object Tôi có nghĩa là các đối tượng tôi đang hiển thị với ng-lặp lại tất cả đều chứa một danh sách các đối tượng trong bản thân, và tôi tìm cách lọc dựa trên thuộc tính của một trong các đối tượng phụ đó.

Điều này một mình khá đơn giản để thực hiện. Tôi có một đối tượng của dailies, mỗi dòng chứa một date và một danh sách entries của các đối tượng:

function Ctrl($scope) { 
    $scope.dailies = [{date: new Date('07/07/2013'), 
         entries: [{category: 'A', note:'Lorem ipsum'}, 
           {category: 'B', note: 'Lorem ipsum'}]}, 
         {date: new Date('05/02/2013'), 
         entries: [{category: 'A', note: 'Lorem ipsum'}]}]; 
}

tôi hiển thị chúng, lọc theo thể loại:

<div ng-controller="Ctrl"> 
     <div class="daily" ng-repeat="daily in dailies | orderBy:'-date' "> 
      {{ daily.date | date:'dd/MM/y' }} 
      <div class="entry" ng-repeat="entry in daily.entries | filter:{ category: 'B'} "> 
       <span>{{ entry.category }}</span>, <span>{{ entry.note }}</span> 
      </div> 
     </div> 
    </div>

Vấn đề của tôi ở đây là các đối tượng hàng ngày mà bây giờ không chứa mục nào cả vẫn được hiển thị. Làm thế nào để đạt được một tình huống trong đó, nếu việc lọc làm cho danh sáchtrống, rằng daily cũng không được hiển thị?

Nguồn

2013-07-07 Elise

Tôi nghĩ bạn phải tạo bộ lọc của riêng mình – Ven

Bạn được phép tạo thành viên phạm vi mới bên trong biểu thức.

Điều này cho phép bạn chỉ định danh sách được lọc cho một biến mới, có thể được sử dụng trong phạm vi địa phương. Với điều đó, bạn có thể vượt qua độ dài của danh sách lọc để ng-show: Câu hỏi

<body ng-app> 
    <div ng-controller="Ctrl"> 
    <div class="daily" 
     ng-repeat="daily in dailies | orderBy:'-date' " 
     ng-show="filteredEntries.length" 
    > 
     {{ daily.date | date:'dd/MM/y' }} 
     <div class="entry" 
     ng-repeat="entry in filteredEntries = (daily.entries | filter:{ category: 'B'})" 
     > 
     <span>{{ entry.category }}</span>, <span>{{ entry.note }}</span> 
     </div> 
    </div> 
    </div> 
</body>

FIDDLE

Btw, độc đáo đặt!

Nguồn

2013-07-07 17:35:27 Stewie

Chà, điều này thật tuyệt! Mặc dù một chút truy cập trực quan, nhìn thấy như filterEntries.length được sử dụng trước khi filterEntries thực sự được định nghĩa, nhưng tôi đoán đó chỉ là góc cạnh. – Elise

Điều này thật tuyệt. Có anyway để lưu filterEntries đến một biến phạm vi cao hơn lên chuỗi, hoặc trong rootScope ví dụ? – morgs32

Giải pháp rất thanh lịch, dễ dàng hơn nhiều khi bộ lọc tùy chỉnh lặp phức tạp mà tôi đang cố gắng viết để hoàn thành cùng một điều. Cảm ơn! –

Lọc danh sách ng-repeat dựa trên một tài sản sub-object

Trả lời

Các vấn đề liên quan