Delete button in a list item

ionic-v1
1

So, I need a button to slide the item that appears to remove the item from the list. What I look for in codepen but I have not been able to replicate D:

2

You need something like that? : http://codepen.io/anon/pen/vqdtA

Share your code if you need more help.

1 Like
3

Yes, i need this. I’ll leave the code of my list because I can not get to do this.

<ion-view title='{{title}}'>
   <ion-content>
    <ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
      <ion-item ng-show="!groups.length" style="border-color: transparent;">
      No tienes corredores asociados
      </ion-item>
      <ion-item  ng-show="resultados.length" ng-repeat="group in groups" item="task" style="border-color: transparent;">
      <div class="ion-close-circled" style="color: red;position: absolute;z-index: 2000;right: 20px;top: 20px;" ng-click="onItemDelete($index)"></div>
      <a class="item item-avatar" ng-click="toggleGroup(group,group.pid,$index)" ng-class="{active: isGroupShown(group)}">
        <img src="img/icon_user.png">
        <h2>{{group.name}}</h2>
        <p>Número corredor : {{group.bib}}</p>
        <p>Ciudad : {{group.city}}</p>
        <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
      </a>
     <ion-item class="item-accordion" ng-show="isGroupShown(group)" ng-repeat="datos in group.items">
            <div id="datosParticipante" class="datagrid" style="margin-top:10px;">
            <table style="width:100%">
              <thead>
                <th>Punto</th>
                <th>Tiempo</th>
                <th>Hora</th>
              </thead>
              <tbody>
                <tr ng-repeat="dato in datos">
                   <td>{{dato.point}}</td>
                   <td>{{dato.time}}</td>
                   <td>{{dato.timeOfDay}}</td>
                </tr>
              </tbody>
            </table>
          </div>
      <center style="margin-top:20px;">
        <button class="button button-positive" style="background-color: #ff6702;color: #FFF;font-family: Entel_2;border-color: #ff6702;" ng-click="verResultados(group.bib)">
          Ver _resultadOs oficiales }
        </button>
      </center>
      </ion-item>
      </ion-item>
    </ion-list>
</ion-content>
</ion-view>