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 =＆＃34; 1＆＃34;而不是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刷新列表

1 个答案: