2013-11-21 21 views
9

Geçerli etkin slaydın ne olduğunu bilmenin bir yolu var mı?Bootstrap AngularJS carousel - aktif slayt nesnesinin nasıl bilineceği

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> 

Eminim ben gerçi izlemek eklemem gerekiyor edildi değilim?

ayrı bir soru olarak tedavi edin:

Sen slayt 2 çizelgeleri bilgiler vardır benim kodundan görebilirsiniz. Ama sunulan/kayan ikinci tek başına genişlik sıkılır.

Başka bir deyişle, oluşturma sırasında yüksek grafiği otomatik olarak ölçeklendirmenin herhangi bir yolu var mı?

Düzeltmek için herhangi bir iş var mı?

cevap

8

Güncelleme:

Aslında angular-ui slayt aktif hale geldiğinde gerçek olarak ayarlanır slide direktifi üzerine active özelliğini ayarlamak için izin vermiyor.

Bu örnekte, slide.active, slayt etkinken true olarak ayarlanacaktır.

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

Kontrolör var was an issue

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

slide olay bu bilgileri eklemek için, ama bunu yapmamaya karar verdi.

kendisine bazı geçici çözümler olsa vardır: Aşağıdaki jQuery kodu ile atlıkarınca slayt geçerli dizini almak mümkün oldum

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

Bu, tam olarak aradığım cevaptır. – user3017191

+0

Yardım etmekten memnun oldum. :) –

+0

Lütfen bunu ayrı bir soru olarak ele alın: Kodumdan 2 adet slayt bilgisinin olduğunu görebilirsiniz. Ama sunulan/kayan ikinci tek başına genişlikle sıkıştığında. Başka bir deyişle, oluşturma sırasında yüksek grafiği otomatik olarak ölçeklendirmenin herhangi bir yolu var mı? Düzeltmek için herhangi bir iş var mı? Saygılarımızla Kay – user3017191

1

(carousel html değeri id="myCarousel" olmalıdır:

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

Ben ng-tokatlamak-sol/sağ atlıkarınca ve çalışır şeyi eklemek için kullanılır: Bu bootstrap 3.0.2

için çalışır (burada kontrolörün js kodu ile size interesed eğer, tam cevap angular ui.bootstrap.carousel call next()/prev() from $scope)

İlgili konular