温泉 UI 旋转木马滑动列表项

Question

我正在使用温泉 ui 框架的旋转木马功能，以便通过从左向右滑动来删除列表中的项目，就像在 ios/android 中一样。滑动会显示一个 "delete" 按钮，该按钮应从列表中删除该项目并重新排序问题是，视图总是删除最后一行而不是我按下按钮的那一行，但是，该行在数据数组中被正确删除。

有人对此有答案吗？

*希望有s.o。那里有解决方案

Answer 1

您应该提供一些代码，以便我们了解您的尝试。您使用的是 ngRepeat 指令和 <ons-list> 吗？在这种情况下，您应该只从数据数组中删除该项目。

在控制器中创建项目列表（可以是任何内容）：

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

在您的 HTML 中，您使用 ngRepeat 循环遍历它们。要删除项目，请使用 ngClick 并拼接列表。

<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>

我在下面的例子中使用了轮播，但你在列表中放什么并不重要。 http://codepen.io/argelius/pen/qEmjEB

温泉 UI 旋转木马滑动列表项

Onsen UI Carousel Swipe list item

carousel

angularjs

onsen-ui