How to dynamic create a list with divider


#1

I am new to Ionic an Angular.

So I want to create a dynamic list where the items are separated by dividers.

So for now my service return a list that could look something like this:

ListDataOp.getMainList = function () {
return [{systemHeadline: ‘System1’, text: ‘ALGO’, value: “ALGO”, listIcon: “ion-checkmark” }, { systemHeadline: ‘System1’,text: ‘ARF’, value: “ARF”, listIcon: “ion-close” }, { systemHeadline: ‘System2’, text: ‘CAMP’, value: “CAMP”, listIcon: “ion-checkmark” }];
};

So then the systemHeadline changes name I would like to have a divider in the list with the systemHeadline name.

So in my template the following codes adds a divider for each item in the list:
ion-pane>
ion-header-bar class=“bar-stable”>
h1 class=“title”>KRSData
/ion-header-bar>
ion-content class=“has-header”>
ion-list ng-repeat=“subscription in krsSubscriptions”>
div class=“item item-divider”>
{{subscription.systemHeadline}}
/div>
ion-item class=“item-icon-right”>
i class=“icon {{subscription.listIcon}}”>
{{subscription.text}}
/ion-item>
/ion-list>
/ion-content>
/ion-pane>

(I have left out all ‘<’ otherwise my code will not be shown).

How can I change this to only a divider when the name changes?

I have left out the controller in this example as it just parses the value from the service to the template.