我有一个div,它使用带有ng-repeat的引导轮播。我也有一种方法可以将项目添加到当前项目列表中。
因此,如果我在索引 0 中并单击添加按钮,我希望能够滑动到新项目。
目前,使用我所拥有的索引,索引似乎设置正确,但它只是没有滑到新项目
$scope.items.splice($scope.currentIndex+1, 0, newItem);
$scope.currentIndex = $scope.currentIndex+1;
$('#myCarousel').carousel($scope.currentIndex);
它仍然只显示项目 1 中的数据。但是当我尝试单击下一步时,它会移动到该新项目。
我也用$('#myCarousel').carousel('next');
尝试过,结果是一样的
编辑:
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="item in items">
// rest of the html
</div>
</div>
</div>
你能发布 html 部分吗? 还要从 1 张以上的幻灯片开始,以便最后至少有 3 张幻灯片用于调试。
按照你的代码,我编译了这样的东西,不知道它是否是你要找的
<body ng-app="cApp" ng-controller="myslides">
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div ng-repeat="item in items" class="item" ng-class="{active:$index==currentIndex}" >
<div>{{item}}</div>
</div>
<h1>Hello Plunker!</h1>
</div>
<a class="left carousel-control" href="#myCarousel" ng-click="currentIndex=currentIndex!=0?currentIndex-1:items.length-1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" ng-click="currentIndex=currentIndex<items.length-1?currentIndex+1:0" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<button class="btn btn-default" ng-click="addslide('another1')">add slide</button>
</body>
使用脚本
var app = angular.module('cApp', []);
app.controller('myslides', function($scope){
$scope.items = ['this is 1','this is 2'];
$scope.currentIndex = 0;
$scope.addslide=function(newItem){
$scope.items.splice($scope.currentIndex+1, 0, newItem);
$scope.currentIndex = $scope.currentIndex+1;
};
});
Aldo 如果你打算使用 Angular,我个人更喜欢使用 angularui 它有一个带有预构建功能的简单轮播,你仍然可以做一些自定义。