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

Question

我的问题与中的问题几乎相同。但是我需要在点击的 ons-list-item 中管理某个轮播（ccall 函数 la 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的新carousel item都是"overwriting"之前的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> 中管理某些轮播

How to manage certain carousel in <ons-list>

angularjs

onsen-ui