如何在 ons-lazy-repeat 检测到更改时使用 ons-carousel 刷新列表

Question

我有一个 ons-list，其中 ons-list-item 有 ons-lazy-repeat 代表。每个 ons-list-item 也有一个带有两个索引（0 和 1）的 ons-carousel 元素。

如果我使用 for 循环拼接绑定到 ons-lazy-repeat 委托的数组，列表将被更改以删除从数组中删除的项目，但 ons-carousel 索引保持不变

示例：

<ons-list>
   <ons-list-item id="myList" modifier="chevron" class="item" ons-lazy-repeat="myDelegate">
      <ons-carousel swipeable auto-refresh style="height: 72px; width: 100%;" initial-index="0" auto-scroll>
         <ons-carousel-item class="list-action-item" ng-click="doThis()">
           Some random text
         </ons-carousel-item>
         <ons-carousel-item class="list-action-menu" ng-click="delete(elementId)">
           Remove all items like this one
         </ons-carousel-item>
      </ons-carousel>                 
   </ons-list-item>
</ons-list>

删除函数是一个 javascript for 循环，它将遍历与 myDelegate 关联的数组并删除与 elementId

不匹配的项目

示例：

for (var i = $scope.myArray.length - 1; i >= 0; i--) {
        var currenElement = $scope.myArray[i];
        if(currenElement.elementId === elementId){
            $scope.myArray.splice(i,1);
        }
};

效果非常好，得到更新，项目从列表中直观地删除。

然而，ons-carousel 索引对于数组的元素 i 保持为 1，这意味着如果元素 i 被删除，则列表中的元素 i+1 成为元素 i 会将索引更改为 1。

示例可在 http://codepen.io/anon/pen/XJOgoa 尝试向左拖动任何元素并按下删除：您将看到该元素被删除但元素 i+i 现在显示删除（ons-carousel index="1" 而不是 0）

感谢任何帮助。

Answer 1

在删除元素之前使用 prev({animation: 'none'}) 固定视图：

$scope.remove = function(index) {
  $scope.carousel[index].prev({animation: 'none'});
  $scope.myArray.splice(index, 1);
};

好吧，在您的 Codepen 中，删除功能被触发了两次。这是一个错误，但现在已在最新版本的 Onsen UI 中修复。在这里工作：http://codepen.io/frankdiox/pen/ByMmwE

编辑： 创建了一个关于此的issue on Github。

如何在 ons-lazy-repeat 检测到更改时使用 ons-carousel 刷新列表

How to refresh a list with an ons-carousel when ons-lazy-repeat detects a change

javascript

angularjs

onsen-ui