Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap AngularJS carousel - how to know the active slide object

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.

like image 683
user3017191 Avatar asked Nov 21 '13 11:11

user3017191


People also ask

Why is Bootstrap Carousel not sliding?

In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).

Which component is used to cycle through elements like a slideshow Bootstrap?

The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).

Which attribute will you use to set a carousel change time in Bootstrap?

The Data-interval attribute is used to set the interval time between two carousel item by default its value is 3000 milliseconds.

What does a Bootstrap carousel do?

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.


1 Answers

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:

  1. This comment on the issue
  2. Twitter Bootstrap Carousel - access current index
like image 189
musically_ut Avatar answered Nov 03 '22 01:11

musically_ut