离子角嵌套ng-repeat过滤器，如果为空则隐藏标题

Question

I have a nested list with a filter , it has days and activities.

objects looks like :

days:[ 
{name:"monday", acts[{title:"Zumba",start:"10am",end:"11am"},{}..]}...
]

Filter works good but I'd like to hide the day header (group.title) when filter returns 0 activities for that day.

I found some answers like this : AngularJS - hide parent element if children loop is empty (filtered)

And tried to implement with no success.

This is my code :

view

<ion-view view-title="{{titulo}}">
  <ion-content>
      <div class="container-hearder-image" style="background-image: url('{{img}}');" >
    </div>
    <h4>{{titulo}}</h4>
    <p>Seleccione Actividades</p>
      <div ng-repeat="c in colors">
          <ion-checkbox ng-click="includeColour(c)" class="item-bcg waves-effect waves-block waves-light"/> {{c}}
       </div>
    <ion-list ng-repeat="group in detailService.selected.days" >
        <div class="item item-divider bar bar-header bar-calm" >{{group.title}}</div>
        <ion-list ng-repeat="item in group.acts | filter:colourFilter">
          <ion-item >
            <h3>{{item.title}}</h3>
            {{item.start}} - {{item.end}}
          </ion-item>
        </ion-list>      
    </ion-list> 
  </ion-content>
</ion-view>

controller

.controller('HorarioCtrl', function($scope, $stateParams,detailService) {


    $scope.colors = ['Zumba','Combat','Spinning','HIIT','Pilates','Yoga'];
    $selected = detailService.selected
    $scope.detailService=detailService;
    $scope.titulo = detailService.selected.title;
    $scope.img = detailService.selected.img;
    colourIncludes = [];
    $scope.colourIncludes = colourIncludes

    $scope.includeColour = function(colour) {
        var i = $.inArray(colour, colourIncludes);
        if (i > -1) {
            colourIncludes.splice(i, 1);
        } else {
            colourIncludes.push(colour);
        }
    }

    $scope.colourFilter = function(fruit) {
        if (colourIncludes.length > 0) {
            if ($.inArray(fruit.title, colourIncludes) < 0)
                return;
        }

        return fruit;
    }
});

Regards

Answer 1

You can use alias expression which will then store the intermediate results of the repeater after the filters have been applied.

<div class="item item-divider bar bar-header bar-calm" ng-if="filteredElements.length>0">{{group.title}}</div>
<ion-list ng-repeat="item in group.acts | filter:colourFilter as filteredElements">
 <ion-item >
   <h3>{{item.title}}</h3>
    {{item.start}} - {{item.end}}
  </ion-item>
</ion-list>  

Answer 2

正如您在上方链接的其他帖子所回答的那样，ngShow将在这种情况下工作。

<h3 ng-show="item.title != null">{{item.title}}</h3>

Answer 3

If group.acts.length greater than zero, show the title. Else, display none

 <ion-list ng-repeat="group in detailService.selected.days" >
        <div ng-if="colourFilter.length>0" class="item item-divider bar bar-header bar-calm" >{{group.title}}</div>
        <ion-list ng-repeat="item in group.acts | filter:colourFilter">
          <ion-item >
            <h3>{{item.title}}</h3>
            {{item.start}} - {{item.end}}
          </ion-item>
        </ion-list>      
    </ion-list>