2016-04-01 7 views
0

ich ein Akkordeon Liste in meiner Ionic App haben, die sieht wie folgt aus:Ionic Akkordeon Liste

enter image description here

An der Stelle des schwarzen Quadrats ich ein grünes haben wollen (oder eine beliebige Farbe) Arten LED-Taste suchen/Symbol, das gezeigt wird, wenn diese bestimmte Übung bereits beobachtet wird, im Grunde so etwas wie ein Indikator.

Der Code für diese Akkordeon Liste ist wie folgt:

<ion-view view-title="Trainingsplan"> 
<ion-content class="has-header"> 

<div ng-if="authenticated == true"> 

<ion-list> 
    <div ng-repeat="day in days"><br> 
    <div class="item item-icon-left" ng-click="toggleGroup(day)" ng-class="{active: isGroupShown(day)}"> 
     <i class="icon icon-accessory" ng-class="isGroupShown(day) ? 'ion-minus' : 'ion-plus'"></i> 
     &nbsp; 
     {{day.name}} 
    </div> 
    <a class="item item-icon-left item-accordion" ng-show="isGroupShown(day)" ng-repeat="exercise in day.exercises" type="item-text-wrap" 
     href="#/tab/plan/{{exercise.id}}"> 
     {{exercise.name}} 
    </a> 
    </div> 
</ion-list> 
</div> 

<div ng-if="authenticated!=true">Fail</div> 

</ion-content> 
</ion-view> 

Wie kann ich das erreichen?

Antwort

1

Ich habe es wie folgt vor:

<ion-list> 
    <div ng-repeat="day in days"><br> 
    <div class="item item-icon-left" ng-click="toggleGroup(day)" ng-class="{active: isGroupShown(day)}"> 
     <i class="icon icon-accessory" ng-class="isGroupShown(day) ? 'ion-minus' : 'ion-plus'"></i> 
     &nbsp; 
     {{day.name}} 
    </div> 
    <a class="item item-icon-left item-accordion" ng-show="isGroupShown(day)" ng-repeat="exercise in day.exercises" type="item-text-wrap" 
     href="#/tab/plan/{{exercise.id}}"> 
     {{exercise.name}} 

     <!-- Trial LED --> 

     <span style="float:right;"><i ng-show="isWatched" class="ion-checkmark-round"></i></span> 

    </a> 
    </div> 
</ion-list>