gpt4 book ai didi

angularjs - Bootstrap AngularJS carousel - 如何知道事件的幻灯片对象

转载 作者:行者123 更新时间:2023-12-04 03:58:12 24 4
gpt4 key购买 nike

有什么方法可以让我知道当前的事件幻灯片是什么?

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>

我不确定我是否需要添加 watch ?

请将此视为一个单独的问题:

您可以从我的代码中看到幻灯片中有 2 个图表信息。
但是,当它呈现/滑动第二个时,宽度会被挤压。

换句话说,有什么方法可以在渲染时自动缩放高图?

是否有任何解决方法来解决它。

最佳答案

更新 :

实际上,angular-ui确实允许您设置 active slide 上的属性(property)当幻灯片变为事件状态时将设置为 true 的指令。

在本例中:slide.active将设置为 true当幻灯片处于事件状态时。

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

was an issue将此信息添加到 slide事件,但他们决定不这样做。

不过有一些解决方法:
  • This comment on the issue
  • Twitter Bootstrap Carousel - access current index
  • 关于angularjs - Bootstrap AngularJS carousel - 如何知道事件的幻灯片对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20119387/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com