Bootstrap AngularJS carousel - how to know the active slide object

Question

Is there any way I can know what is the current active slide?

var slides = slides = []; 
slides.push({text: 'Slide 1', type: "chart", chartConfig : { 
                    options: {chart: {type: 'bar'}}, 
                    series: [{data: [10, 15, 12, 8, 7]}], 
                    title: {text: 'Hello 1'}, 
                    loading: false 
}}); 
slides.push({text: 'Slide 3', type: "chart", chartConfig : { 
                            options: {chart: {type: 'bar'}}, 
                    series: [{data: [10, 35, 52, 8, 7]}], 
                    title: {text: 'Hello 2'}, 
                    loading: false 
}}); 
$scope.slides=slides;

<carousel> 
    <slide ng-repeat="slide in slides"> 
        <highchart id="chart{{$index}}" config="slide.chartConfig"></highchart> 
    </slide> 
</carousel>

I am not sure were i need to add watch though?

Please treat this as a seperate question:

You can see from my code there are 2 charts information in the slide. But when its presented / slided second one alone gets squeezed in width.

In other words is there any way i can auto scale the highchart at the time of rendering?

Is there any work around to fix it.

score 8 · Accepted Answer · edited May 23 '17 at 12:34

Update:

Actually, angular-ui does allow you to set an active property on the slide directive which will be set to true when the slide becomes active.

In this example: slide.active will be set to true when the slide is active.

<carousel> 
    <slide ng-repeat="slide in slides" active="slide.active"> 
        <highchart id="chart{{$index}}" config="slide.chartConfig"></highchart> 
    </slide> 
</carousel>

Controller

var slides = slides = []; 

slides.push({
    active: false
  , text: 'Slide 1'
  , type: "chart"
  , chartConfig : { 
        options: {chart: {type: 'bar'}}, 
        series: [{data: [10, 15, 12, 8, 7]}], 
        title: {text: 'Hello 1'}, 
        loading: false }
    }
); 

slides.push({
    active: false
  , text: 'Slide 3'
  , type: "chart"
  , chartConfig : { 
        options: {chart: {type: 'bar'}}, 
        series: [{data: [10, 35, 52, 8, 7]}], 
        title: {text: 'Hello 2'}, 
        loading: false }
   }
); 

$scope.slides=slides;

// May return `undefined` if no slide is active 
// (e.g. when the carousel hasn't initialised)
$scope.getActiveSlide = function () {
    return slides.filter(function (s) { return s.active; })[0];
};

There was an issue to add this information to the slide event, but they decided not to do it.

There are some workarounds to it though:

Please treat this as a seperate question: You can see from my code there are 2 charts information in the slide. But when its presented / slided second one alone gets squeezed in width. In other words is there any way i can auto scale the highchart at the time of rendering? Is there any work around to fix it. Kind Regards Kay — user3017191, Nov 21 '13 at 13:12
I would recommend creating a separate question for it, in that case. — musically_ut, Nov 21 '13 at 13:27
@musically_ut Hi good solution, but in version doesn't work anymore, maybe there is different solution for new version? — SergkeiM, Feb 10 '17 at 20:34

score 1 · Answer 2 · edited May 23 '17 at 10:30

I've been able to get the current index of the carousel slide with the following jQuery code (the carousel html must have the id="myCarousel"):

$('#myCarousel .active').index();

I used it for adding the ng-swipe-left/right to the carousel and it works (if you are interesed, full answer with the controller js code here: angular ui.bootstrap.carousel call next()/prev() from $scope)

It works for bootstrap 3.0.2

Bootstrap AngularJS carousel - how to know the active slide object

2 Answers2