David David - 6 months ago 23
Javascript Question

Getting Angular.js error

I'm following a tutorial on YouTube, and I ran into a problem which I cant figure out. I'm loading images into a angular bootstrap carousel. But I'm getting errors, and the images are not displaying.

Here is my error:

My Problem in console

Here is my homeController.js:

// Set up the "homeController", inject our "$scope"
myApp.controller('homeController', ['$scope', function($scope) {
$scope.slides = [{
image: "img/Astro_3.jpg"
},
{
image: "img/main_2.jpg"
},
{
image: "img/Xbox_Controller_2.jpg"
}]
}]);


And here is my carousel:

<div class="row">
<div class="col-md-3 col-md-offset-3">

<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</uib-slide>
</uib-carousel>

</div>
</div>


/************************ EDIT ***********************/

Fixed it, had to change HTML in carousel.

<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>

Answer

slide.id is undefined, modify your controller like that:

myApp.controller('homeController', ['$scope', function($scope) {
$scope.slides = [{
    image: "img/Astro_3.jpg",
    id: 0
},
{
    image: "img/main_2.jpg",
    id: 1
},
{
    image: "img/Xbox_Controller_2.jpg",
    id: 2
}] }]);