Ionic angular nested ng-repeat filter, hide title if empty

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

Do you have everything else set correctly? Is the output of your ng-repeat as you would expect? — Thomas Juranek
– Thomas Juranek, Commented Dec 23, 2016 at 18:22
Please tell me what is the data in group.title, item.title, item.start and item.end — Ram_T
– Ram_T, Commented Dec 23, 2016 at 18:24
@ThomasJuranek yes, data is filtering properly , but for example if I check "Yoga" and its present on monday only , output looks like this : Monday Yoga Thursday Wednesday Tuesday Friday Saturday I like to show : Monday Yoga — llermaly
– llermaly, Commented Dec 23, 2016 at 18:31
@CharanCherry group.title = is the name of the day, item title is the name of the activity, item start is the time its starting and end is the time its ending, let me show you a screenshot of my output : i.gyazo.com/bf4dc7b1630d588a2fe3b1539b234401.png all titles without activities filtered must hide — llermaly
– llermaly, Commented Dec 23, 2016 at 18:34

Ram_T · Accepted Answer · 2016-12-23 19:09:40Z

3

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>

edited Dec 23, 2016 at 19:09

Ram_T

8,50411 gold badges42 silver badges64 bronze badges

answered Dec 23, 2016 at 18:23

Manu Obre

2,3041 gold badge14 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

llermaly Over a year ago

Works! , I was days trying to get to something like this. Thank you very much !!

Thomas Juranek · Accepted Answer · 2016-12-23 17:59:11Z

1

As the other post you linked above answered, ngShow would work in this scenario.

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

answered Dec 23, 2016 at 17:59

Thomas Juranek

3432 silver badges16 bronze badges

1 Comment

llermaly Over a year ago

it doesnt work .. I tried with many ng-show combinations but seems like the solution its not in that way. Title with no activities still showing

Ram_T · Accepted Answer · 2016-12-23 19:05:18Z

1

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>

edited Dec 23, 2016 at 19:05

answered Dec 23, 2016 at 18:20

Ram_T

8,50411 gold badges42 silver badges64 bronze badges

2 Comments

llermaly Over a year ago

Doesnt work. Seems like as I'm using filters group.acts.length does not change to 0 when filtering.

Ram_T Over a year ago

It should work because acts is the array of activities. So, if there are any activities, the array length will be greater than zero. Title only appears if acts.length greater than zero. Please check console if anything wrong.

Collectives™ on Stack Overflow

Ionic angular nested ng-repeat filter, hide title if empty

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related