Mario Aaron Gonzalez Sanchez Mario Aaron Gonzalez Sanchez - 3 months ago 63
AngularJS Question

problems working ui-bootstrap-tpls-2.0.2 Carousel AngularJS

I have the following problem when trying to add the bootstrap carousel ui where I can not see the image that I am calling on js

import

<!-- <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"
}
]];

});


I also appears attributes this active , interval, wrap, index:

Attribute index is not allowed

I'd appreciate your help

Answer

You are tracking by the property id in <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">, $scope.slides items do not have that property. You can track by ImageId or change it to id. I included a link to a working jsFiddle based off your example for you.

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