ブートストラップAngularJSカルーセル - アクティブなスライドオブジェクトを知る方法

Question

現在アクティブなスライドが何であるか知る方法はありますか？

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> 

私は、私も時計を追加する必要がなかったことを確認していませんか？あなたは2つのチャート情報がスライドである私のコードから見ることができます

：

別々の質問としてこれを扱います。 しかし、提示/スライドされた第2のものだけでは、幅が狭くなります。

つまり、レンダリング時にハイチャートを自動的に拡大縮小する方法はありますか？

解決策はありますか？

Answer 1

更新：

実は、angular-uiあなたはスライドがアクティブになったときにtrueに設定されますslideディレクティブにactiveプロパティを設定することができません。

この例では、slide.activeは、スライドがアクティブなときにtrueに設定されます。 slideイベントにこの情報を追加する

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

コントローラ

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が、彼らはそれを行うにはないことを決めました。

それにはいくつかの回避策は、しかしあります。私は、次のjQueryコードでカルーセルスライドの現在のインデックスを取得することができました

1. This comment on the issue
2. Twitter Bootstrap Carousel - access current index

Answer 2

（カルーセルhtmlにはid="myCarousel"が必要です）：

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

（ここでは、コントローラjsのコードを使用して、あなたがinteresedであれば、完全な答え：angular ui.bootstrap.carousel call next()/prev() from $scope）私は右のカルーセルへ/ NG-スワイプ左を追加するためにそれを使用し、それが動作それは、ブートストラップ3.0.2

のために働く