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

【问题标题】：Bootstrap carousel not displaying newly created item引导轮播不显示新创建的项目
【发布时间】：2018-08-22 14:45:11
【问题描述】：

我有一个使用带有 ng-repeat 的引导轮播的 div。我还有一种方法可以将项目添加到当前项目列表中。

因此，如果我在索引 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>

【问题讨论】：

标签： javascript angularjs carousel bootstrap-carousel

【解决方案1】：

你能发布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;

};
});

如果你打算使用 Angular，我个人更喜欢使用 angularui，它有一个带有预构建功能的简单轮播，你仍然可以进行一些自定义。

【讨论】：

我刚刚添加了 HTML 部分