Bootstrap Angular carousel to set active slide dynamically

Question

I am using Bootstrap Angular carousel , what i am trying to do is set active class on load dynamically . my mediacontent[slider_url].items is loadede from backend. i dont have any promied method otherwise i would have set,

mediacontent[slider_url].items.active=true;

follwing is factory (for infinite -scroll) i am using to get image array from backend,

Image Data Factory :

app.factory('ScrollGallery', function($http) {

    var Gallery = function(url) {
        this.items = [];
        this.busy = false;
        this.next = url;
        this.end = false;
        this.extra = {};

    };

    Gallery.prototype.nextPage = function() {
        if (this.busy)
            return;
        this.busy = true;
        if (this.next) {
            var url = this.next;
        } else {
            this.end = true;
            this.busy = false;
            return;
        }
        $http.get(url).success( function(data) {

            var items = data.results;
            var extra = [];
            if ( typeof data.extra != 'undefined') {
                extra = data.extra;
            }

            for (var i = 0; i < items.length; i++) {
                this.items.push(items[i]);
            }
            this.extra = extra;
            this.next = data.next;
            this.busy = false;
            if (!data.next)
                this.end = true;
            this.count = data.count;
        }.bind(this));
    };

    return Gallery;
});

Carousel HTML :

<carousel id="myCarousel" interval="myInterval"  on-carousel-change="onSlideChanged(nextSlide, direction)">

        <slide ng-repeat="slide in mediacontent[slider_url].items" active="slide.active">
            <div ng-if="slider_url=='image'">
            <img ng-src="{[{slide.file}]}" alt="{[{slide.file}]}" style="margin:auto;width:250px;height:400px" />
            </div>
       </slide>

</carousel>

Is there any way where i can set active dynamically ,Please suggest .

this plunker i have tried : http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview

score 0 · Answer 1 · answered Jan 09 '15 at 13:22

I had issue that i was not getting any $promise method for data . hence i was not able to set active class true in Array.i have added promise in service method.

In controller i am setting active class using index like

$scope.mediacontent[slider_url].items[idx].active=true

Infinite-service ::

app.factory('ScrollGallery', function($http,$q) {

    var Gallery = function(url) {
        this.items = [];
        this.busy = false;
        this.next = url;
        this.end = false;
        this.extra = {};

    };

    Gallery.prototype.nextPage = function() {
        var def = $q.defer();
        if (this.busy)
            return;
        this.busy = true;
        if (this.next) {
            var url = this.next;
        } else {
            this.end = true;
            this.busy = false;
            return;
        }
        $http.get(url).success( function(data) {

            var items = data.results;
            var extra = [];
            if ( typeof data.extra != 'undefined') {
                extra = data.extra;
            }

            for (var i = 0; i < items.length; i++) {
                this.items.push(items[i]);
            }
            this.extra = extra;
            this.next = data.next;
            this.busy = false;
            if (!data.next)
                this.end = true;
            this.count = data.count;
              def.resolve(data);
        }.bind(this));
        return def.promise;
    };

    return Gallery;
});

In controller ::

$scope.mediacontent[$scope.slider_url] =new ScrollGallery($scope.slider_url_pass); 
        $scope.mediacontent[$scope.slider_url].nextPage().then(function(albums) {

                $scope.mediacontent[$scope.slider_url].items[$scope.img_no].active=true;

                console.log('albums returned to controller.');
            },
            function(data) {
                console.log('albums retrieval failed.');
            });

Bootstrap Angular carousel to set active slide dynamically

1 Answers1