Question

我有一个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>

Answer 1

您可以发布html部分吗？还应从多于一张幻灯片开始，以便最后至少有三张幻灯片用于调试。

在您的代码之后，我编译了类似这样的内容，不知道这是否是您想要的

 <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;

};
});

如果您要使用角度工具，也可以使用angularui，该工具带有一个带有预构建功能的简单轮播，您仍然可以进行一些自定义。

引导轮播不显示新创建的项目

1 个答案: