2013-07-07 2 views
34

jsfiddle http://jsfiddle.net/KfSBq/Filtrare un elenco ng ripetizione sulla base di una proprietà sub-oggetto

By sub-oggetto voglio dire che gli oggetti che sono la visualizzazione con ng-ripetono tutti contengono un elenco di oggetti in se stessi, e sono cercando di filtrare in base alla proprietà di uno di questi oggetti secondari.

Questo da solo era abbastanza semplice da fare. Ho un oggetto di dailies, ognuno contenente un date e una lista entries di oggetti:

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

li visualizzo, filtrando per categoria:

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

mio problema qui è che gli oggetti quotidiani che ora non contengono ancora voci. Come posso ottenere una situazione in cui, se il filtro rende vuoto l'elenco entries di daily, non viene visualizzato anche daily?

+0

Penso che devi creare il tuo filtro – Ven

risposta

48

È possibile creare nuovi membri di ambito all'interno delle espressioni.

Ciò consente di assegnare un elenco filtrato a una nuova variabile, che può essere utilizzata in tutto lo scope locale. Con questo, è possibile passare la lunghezza della lista filtrato per 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, ben messo domanda!

+2

Wow, questo è fantastico! Un po 'contro intuitivo, visto che filteredEntries.length viene usato prima che filteredEntries sia effettivamente definito, ma immagino che sia solo angolare .. – Elise

+1

Questo è bello. Esiste comunque la possibilità di salvare i file filtrati su una variabile dell'oscilloscopio più in alto nella catena o, in esempio, in rootScope? – morgs32

+0

Soluzione molto elegante, molto più semplice del complesso filtro di looping che stavo cercando di scrivere per realizzare la stessa cosa. Grazie! –