Question

我的问题与Onsen UI Carousel Swipe list item问题几乎相同。但我需要在轻触的ons-list-item上管理某个轮播（ccall函数和setActiveCarouselItemIndex（）），而不是删除列表成员。我写了下面的代码：

 <ons-page ng-controller="TaskListCtrl">
  <ons-toolbar>
    <div class="center">Home</div>
  </ons-toolbar>

  <ons-list>
    <ons-list-item modifier="chevron" ng-controller="TaskItemCtrl" ng-repeat="task in tasks">
      <ons-row>
        <ons-col width="60px">
          {{ task.id }}
        </ons-col>
        <ons-col>
          <ons-carousel var="taskCarousel" auto-scroll style="width: 100%; height: 70px" ng-click="nextView()">
            <ons-carousel-item>
              View #1 {{ task.descr }}
            </ons-carousel-item>
            <ons-carousel-item>
              View #2 {{ task.details }}                  
            </ons-carousel-item>
          </ons-carousel>
        </ons-col>
      </ons-row>
    </ons-list-item>
  </ons-list>
</ons-page>

代码是：

var app = angular.module('app', ['onsen']);

app.controller('AppController', function($scope) {

});

app.controller('TaskListCtrl', function($scope) {
    $scope.tasks = [
            {
                id: "1",
                descr: "Task Description #1",
                details: "Details of Task #1"
            },
            {
                id: "2",
                descr: "Task Description #2",
                details: "Details of Task #1"
            },
            {
                id: "3",
                descr: "Task Description #3",
                details: "Details of Task #1"
            },
            {
                id: "4",
                descr: "Task Description #4",
                details: "Details of Task #1"
            }
        ];

    });

    app.controller('TaskItemCtrl', ['$scope', function($scope) {
        $scope.nextView = function() {
            var currentIndex = $scope.taskCarousel.getActiveCarouselItemIndex();
            $scope.taskCarousel.setActiveCarouselItemIndex((currentIndex + 1) % 2);            alert($scope.task.descr + "\n" + $scope.taskCarousel.toString());

        };
    }]);

点击列表中的任何项目只管理最后一个ons-list-item上的轮播。

提前谢谢你......

Answer 1

在您的代码中，您将每个轮播项目命名为var="taskCarousel"。问题是每个带有ng-repeat的新轮播项目都是＆＃34;覆盖＆＃34;之前的var="taskCarousel"，所以最后它只能访问最后一个。一种可能的解决方案是使用例如您的任务ID动态命名您的项目：

<ons-carousel var="{{task.id}}" auto-scroll style="width: 100%; height: 70px" ng-click="nextView(task.id)">
   <ons-carousel-item>
      View #1 {{ task.descr }}
   </ons-carousel-item>
        <ons-carousel-item>
       View #2 {{ task.details }}                  
   </ons-carousel-item>
</ons-carousel>

请注意，现在我们也会在使用ng-click="nextView(task.id)"点击某个项目时发送此ID。因此，在控制器中，我们需要使用括号表示法而不是点符号来访问元素，因为我们发送的参数只是一个字符串：

app.controller('TaskItemCtrl', ['$scope', function($scope) {
   $scope.nextView = function(taskID) {
       var currentIndex = $scope[taskID].getActiveCarouselItemIndex();
       $scope[taskID].setActiveCarouselItemIndex((currentIndex + 1) % 2);
   };
}]);

You can try it in Codepen here。希望它有所帮助：）

如何在<ons-list> </ons-list>中管理某些轮播

1 个答案: