0

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

mediacontent[slider_url].items.active=true;

以下是我用来从后端获取图像数组的工厂（用于无限滚动），

图像数据工厂：

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>

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

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

4

1 回答 1

0

我有一个问题，我没有得到任何 $promise 方法的 data 。因此我无法在 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.');
            });
于 2015-01-09T13:22:02.557 回答