List in Ionic with conditions

Question

I have this html:

<ion-content>
<div class="bar bar-header bar-light">
  <h1 class="title">{{ 'SchoolHours' | translate}}</h1>
</div>
<ion-list>
  <ion-item ng-repeat="day in days">
      {{day}}
      <ion-list>
          <ion-item ng-repeat="subject in list_subjects">
              <h2>{{subject.theme.name}}</h2>
              <h3>{{subject.hour_ini}} - {{subject.hour_finish}}</h3>
              <h3>{{ 'Teacher' | translate }} : {{subject.teacher.name}} - {{subject.teacher.mail}}</h3>
          </ion-item>
      </ion-list>
  </ion-item>
</ion-list>

days array is like this: ["Monday", "Tuesday",..] list_subjects array has got objects. These objects have got an attribute called weekday.

I would like in the second list of HTML, it lists only objects that matches with current day in days array.

Thanks!

score 2 · Accepted Answer · edited May 23 '17 at 11:51

Solution#1

You need to make your own filter for this purpose, which will be like this

.filter("filterByDays", function(filterFilter){
  return function (subjects, day) {
    return filterFilter(subjects,{weekday:day})
  };
});

And use it like this

<ion-item ng-repeat="subject in subjects|filterByDays:day">

Demo with your code : http://play.ionic.io/app/a2238d1002a1
Documenation on how to write own filter: https://docs.angularjs.org/tutorial/step_09

Solution#2

Well this is the most simpler one, you should use groupBy filter provided by https://github.com/a8m/angular-filter , in this case you will not have to use days array to make group of subjects by days. This filter will do all grouping by using weekday property of subject. See my answer on how to use that.
Demo with your code: http://play.ionic.io/app/9f069e28c42a
NOTE: Do not use ng-if for your case, using filters is best and optimized solution for these kind of situdations.

List in Ionic with conditions

1 Answers1