web-dev-qa-db-fra.com

Filtrage d'une liste ng-repeat basée sur une propriété de sous-objet

jsfiddle http://jsfiddle.net/KfSBq/

Par sous-objet, je veux dire que les objets que j'affiche avec ng-repeat contiennent tous une liste d'objets en eux-mêmes, et je cherche à filtrer en fonction de la propriété de l'un de ces sous-objets.

Cela seul était assez simple à faire. J'ai un objet de dailies, chacun contenant un date et une entries liste d'objets:

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

Je les affiche en filtrant par catégorie:

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

Mon problème ici est que les objets quotidiens qui ne contiennent plus aucune entrée sont toujours affichés. Comment puis-je obtenir une situation où, si le filtrage vide la liste entries d'un daily, que daily ne s'affiche pas non plus?

angularjsangularjs-filter
34
Elise

Vous êtes autorisé à créer de nouveaux membres d'étendue dans les expressions.

Cela vous permet d'affecter une liste filtrée à une nouvelle variable, qui peut être utilisée dans toute l'étendue locale. Avec cela, vous pouvez passer la longueur de la liste filtrée à 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>

VIOLON

Btw, bien posé la question!

48
Stewie