工作问题 ui-bootstrap-tpls-2.0.2 Carousel AngularJS

Question

我在尝试添加 bootstrap 轮播 ui 时遇到以下问题，我在 js

上看不到调用的图像

进口

 <!-- <link href="resource/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet"> -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="resource/css/estilos.css" rel="stylesheet" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<script type='text/javascript' src='./resource/angular-1.5.5/angular.js'></script>
<script type='text/javascript' src='./app/controllers/Gallery2.js'></script>
<script type='text/javascript' src='./resource/framework/ui-bootstrap-tpls-2.0.2.js'></script>
<script type='text/javascript' src='./resource/angular-1.5.5/angular-animate.js'></script>

html

            <div class="span10" >
            <!--Body content-->
            <div ng-controller="CarouselDemoCtrl">
                <div style="height: 305px">
                    <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
                        <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
                            <img ng-src="{{slide.Path}}" style="margin:auto;">
                            <div class="carousel-caption">
                                <h4>Slide {{slide.ImageID}}</h4>
                                <p>{{slide.Title}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

js

angular.module('myModule', ['ngAnimate', 'ui.bootstrap']).controller('CarouselDemoCtrl',function ($scope) {
    $scope.myInterval = 5000;
    $scope.slides = [[
        {
            "ImageID": 1,
            "Title": "Tulips",
            "Summary": "This is summary of Tulips",
            "Path": "\resource\img\logo.png"
        }
    ]];

});

我也出现了这个active属性，interval，wrap，index：

不允许属性索引

非常感谢你的帮助

Answer 1

您正在通过 <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"> 中的属性 id 进行跟踪，$scope.slides 项没有属性。您可以通过 ImageId 跟踪或将其更改为 id。我根据您的示例为您提供了一个 link 到一个有效的 jsFiddle。

http://jsfiddle.net/gbsmit03/6c7z3fxk/

工作问题 ui-bootstrap-tpls-2.0.2 Carousel AngularJS

problems working ui-bootstrap-tpls-2.0.2 Carousel AngularJS

javascript

html

angularjs

ui.bootstrap