Question

我正在使用Bootstrap Angular轮播，我想要做的是动态设置活动类加载。我mediacontent[slider_url].items来自后端。我没有任何有希望的方法，否则我会设置，

mediacontent[slider_url].items.active=true;

follwing is factory（for infinite -scroll）我用来从后端获取图像数组，

图片数据工厂：

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

轮播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>

有什么方法可以动态设置，请建议。

我试过这个傻瓜： http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview

Answer 1

我遇到的问题是我没有得到任何$ promise方法的数据。因此我无法在Array.i中设置活动类true在服务方法中添加了承诺。

在控制器中，我使用像

这样的索引设置活动类

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

无限服务::

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

在控制器::

中

$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轮播动态设置活动幻灯片

1 个答案: