[英]Bootstrap Angular carousel to set active slide dynamically
I am using Bootstrap Angular carousel , what i am trying to do is set active class on load dynamically . 我正在使用Bootstrap Angular传送带,我想做的是在负载上动态设置活动类。 my
mediacontent[slider_url].items
is loadede from backend. 我的
mediacontent[slider_url].items
是从后端加载的。 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, follwing是工厂(用于无限滚动),我正在从后端获取图像数组,
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 : 轮播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 我尝试过的这个矮人: http ://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview
I had issue that i was not getting any $promise method for data . 我遇到的问题是我没有得到任何$ promise方法来存储数据。 hence i was not able to set active class true in Array.i have added promise in service method.
因此,我无法在Array.i中将活动类设置为true,因此在服务方法中添加了promise。
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.');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.