Onsen UI Carousel Swipe list item

Question

i am using the carousel feature of the onsen ui framework in order to delete items in a list by swiping from left to right, like in ios/android. The swipe displays a "delete"-button which should delete this item from the list and reorder it The problem is, the view always deletes the last row instead the one i pressed the button on, however, the row is removed correctly in the dataarray.

Does anyone have an answer for that??

*hope that there is s.o. out there with a solution

Answer 1

You should supply some code so we can see what you've tried. Are you using the ngRepeat directive and a <ons-list>? In that case you should just remove the item from the data array.

In a controller you create a list of items (can be anything):

angular.module('myApp').controller('MyController', function($scope) {
  $scope.items = ['A', 'list', 'of', 'items'];
});

In your HTML you use ngRepeat to loop through them. To remove an item use ngClick and splice the list.

<ons-list>
  <ons-list-item ng-repeat="item in items">
    {{ item }}
    <ons-button ng-click="items.splice($index, 1)">Remove item</ons-button>
  </ons-list-item>
</ons-list>

I've used carousel in the following example, but it shouldn't really matter what you put in your list. http://codepen.io/argelius/pen/qEmjEB