2013-07-07 22 views
34

jsfiddle http://jsfiddle.net/KfSBq/Filtrowanie listy NG-repeat na podstawie właściwości sub-obiektowego

przez sub-object I oznacza, że ​​obiekty jestem wystawianie ng-powtórz wszystko zawiera listę obiektów w sobie i jestem szuka filtra w oparciu o właściwość jednego z tych pod-obiektów.

Samo to było dość proste. Mam przedmiot dailies, każda zawierająca date i entries lista obiektów:

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'}]}]; 
} 

wyświetlać je, filtrowanie według kategorii:

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

Mój problem jest to, że codzienne przedmioty, które teraz nie zawierają żadnych wpisów są nadal wyświetlane. Jak uzyskać sytuację, w której, jeśli filtrowanie powoduje, że lista entries z pustego daily jest niewidoczna, to ten komunikat nie jest wyświetlany?

+0

Myślę, że musisz stworzyć własny filtr – Ven

Odpowiedz

48

Masz prawo do tworzenia nowych członków zakresu wewnątrz wyrażeń.

Umożliwia to przypisanie filtrowanej listy do nowej zmiennej, która może być używana w zasięgu lokalnym. Z tym, można przekazać długość przefiltrowanej listy do ng-show:

<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, ładnie umieścić pytanie!

+2

Wow, to jest świetne! Jednak trochę intuicyjny, widząc jako filterEntries.length jest używany zanim zdefiniowano filterEntries, ale myślę, że to po prostu kątowe. – Elise

+1

To jest fajne. Czy mimo to można zapisać filtersEntries do zmiennej zasięgu znajdującej się wyżej w łańcuchu lub na przykład w rootScope? – morgs32

+0

Bardzo eleganckie rozwiązanie, o wiele łatwiejsze niż skomplikowany filtr niestandardowy, który próbowałem napisać, aby osiągnąć to samo. Dzięki! –

Powiązane problemy