CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui-bootstrap
user2217288
user2217288

Reputation: 547

watch for changes in UI Bootstrap carusel

Hello i follow tutorial and create basic carousel using UI Bootstrap. I want to track current item in order to change class in navigation, i found solution to use $watch to it, is there any better way to trace that change ? My example code:

$scope.$watch(function () {

    var caruselCurrentItem = 1;
    caruselCurrentItem = $('.carousel-inner .active').index();
    caruselCurrentItem += 1;

    $('#ulTest li').removeClass('TEST');
    $('#ulTest li:nth-child('+caruselCurrentItem+')').addClass('TEST');


});

Upvotes: 1

Views: 301

Answers (1)

lex82
lex82

Reputation: 11317

The way you are using $watch it is certainly not working the way you expect it to work. However, instead of checking for the active class in the DOM I'd rather check for the active field in the model:

// I assume your slides are in $scope.slides
$scope.$watch(function() {
    // This function returns the index of the active slide
    var activeSlides = $scope.slides.filter(function(x) { return x.active }); 
    return $scope.slides.indexOf(activeSlides[0]);
}, function(index) {
    // The index has changed. Now you can do something with it
});

Upvotes: 1

Related Questions