<ion-slide-box does-continue="true" auto-play="true" slide-interval="1000">
<ion-slide ng-repeat="imageUrl in item.images">
<img src="{{imageUrl}}"><img/>
</ion-slide>
</ion-slide-box>
My code above collapses after i change "item" in my controller with help of a button.
Whenever the button is clicked,I tried to do the followings with following order ;
1) $ionicSlideBoxDelegate.stop();
2) Change $scope.item = newITEM;
3) $ionicSlideBoxDelegate.update();
4) $ionicSlideBoxDelegate.start();
But apparently, it doesn't work like this. What would be the solution to solve?
Any help please?
Similar as this question, try to use $timeout after you do the update, like this:
1) $ionicSlideBoxDelegate.stop();
2) Change $scope.item = newITEM;
3) $timeout(function(){
$ionicSlideBoxDelegate.update();
$ionicSlideBoxDelegate.start();
}, 500);
Related
This spinner option from ionic is spinning all the time Like here
<ion-spinner icon="spiral"></ion-spinner>
How to make the spinner spin only after user presses the button, not before!?
You can try this also inside your controller
$scope.show = function() {
$ionicLoading.show({
template: '<p>Loading...</p><ion-spinner icon="android"></ion-spinner>'
});
};
$scope.hide = function(){
$ionicLoading.hide();
};
You can call $scope.show($ionicLoading); to start the spinners and you can make it end with this $ionicLoading.hide();
of course you have to inject $ionicLoading in your controller.
It worked for me hope it will help you
You can simply show and hide ion-spinner directive. In the codepen link you can change the button part and paste this:
<button type="submit" ng-click="click()" class="button button-block button-positive">
<ion-spinner ng-hide="showing" class="spinner-energized"></ion-spinner>
<span class="button-text">Click me!</span>
</button>
and add to MainCtrl
$scope.showing = true;
$scope.click = function(){
$scope.showing = false;
}
so when you press the button spinner will show. Of course you need some logic to stop it but this is just to show you how you can handle this. Hope it helps.
HTML
<button ng-Click="someFunction()"></button>
Controller
$scope.someFunction = function(){
$ionicLoading.show({
noBackdrop :false,
template: ' <ion-spinner icon="spiral"></ion-spinner>',
duration :20000//Optional
});
//Do Something
$ionicLoading.hide();//Hide it after Something is completed
}
It will show spinner as soon as you press button .
Regards
i have the slider like this:
<ion-slides #promoSlider [options]="homeOptions" (change)="onPromoSlideChanged()" >
<ion-slide *ngFor="let promo of promos">
<img *ngIf="promo" src="{{promo.image}}" style="width:300px;height:300px;margin:auto;display:block" >
</ion-slide>
</ion-slides>
I have use this options to keep my slide playing using auto play:
homeOptions = {
initialSlide: 0,
loop: true,
autoplay:2000
};
But the problem is when i swipe the slider the auto play is stopped and the slider is not sliding again. How to keep the slider playing even i swipe the slider. I have try this code:
onPromoSlideChanged() {
alert('ABC');
this.promoSlider.options = this.homeOptions;
this.promoSlider.rapidUpdate();
//What should i do in this method?
};
What event i need to keep the slider slide again (keep playing) when i swipe the slider ? Thanks...
You can find your answer here => https://forum.ionicframework.com/t/how-to-keep-slides-auto-play-when-the-slides-is-swiped/54025/6
The official docs reference the component Swiper as the base of the ion-slides component, so the API should be the same as the one described in http://idangero.us/swiper/api/11.
You could use the option autoplayDisableOnInteraction to avoid disabling auto play after the user interaction.
Your options array should be:
homeOptions = {
initialSlide: 0,
loop: true,
autoplay:2000,
autoplayDisableOnInteraction: false
};
Hope it helps.
$scope.images = {"status":true,"msg":"2 record(s) found","sliders":[{"title":"slider 1","content":"test
value","weblink":null,"image":"http:\/\/192.168.8.54\/test\/media\/mbimages\/a\/m\/test.jpg"},{"title":"Slider
2","content":null,"weblink":null,"image":"http:\/\/192.168.8.54\/test\/media\/mbimages\/
a\/m\/test.png"}]}
<ion-slide-box delegate-handle="img-viewer" options="options" does-continue="true" loop="true" auto-play="true" slide-interval="5000" >
<ion-slide ng-repeat="nt in images" ng-if="nt.slider_position == '1'" >
<div class="box"><img ng-src="{{nt.image}}" style="width:400px;height:200px;margin:auto;display:block"/></div>
</ion-slide>
</ion-slide-box>
**Controller**
$scope.counter = 0;
$interval(function ()
{
if($scope.counter == $ionicSlideBoxDelegate.$getByHandle('img-viewer').currentIndex() + 1)
{
$ionicSlideBoxDelegate.$getByHandle('img-viewer').slide(0);
}
else{
$ionicSlideBoxDelegate.$getByHandle('img-viewer').update();
}
}, 2000);
angular.forEach($scope.images, function(value, key){
if(value.slider_position == "1")
{
$scope.counter++;
}
Using Observable works for your scenario. You can use it as -
import {Observable} from 'Rxjs/rx';
// in class -
#ViewChild(Slides) slides: Slides;
ionViewDidEnter() {
//you get slider data from any web service
this.sliderObservable = Observable.interval(3000).subscribe(x => {
this.autoPlaySlider();
// or you can do this, it will start autoplay at every 3 seconds
// this.slides.startAutoplay();
});
}
autoPlaySlider(){
var slider_index = this.slides.getActiveIndex();
if(slider_index < this.sliderData.length){
this.slides.slideTo(slider_index+1);
}
else{
this.slides.slideTo(0);
}
}
ionViewDidLeave(){
this.sliderObservable.unsubscribe();
}
You can find more reference Here
I use the ion-slide directive documented here and I cannot find a method to hide the pager. I tried setting the pager attribute as in:
<ion-slides options="myOptions" pager="false" slider="mySlide[item.id]">
however that does not work, the pager bullets are still showing.
Is it possible to hide the ion-slides pager, and if so - how?
official solution:
options="{pagination: false}"
Just add this in your css:
.swiper-pagination-bullet{
background:white!important;
border-radius: 100%;
height: 17px;
width: 17px;
display: none;
}
Hope this helps
Just remove pager.
Example:
<ion-slides pager loop autoplay="1500" class="auto_height"> ...
just put (without "pager"):
<ion-slides loop autoplay="1500" class="auto_height"> ...
If these slides are being added to an ion-slide-box, you can:
show-pager="false"
on the ion-slide-box. See the docs for more info.
You might also be able to hide them via css like:
.slider-pager { display:none; }
i'm searching a solution for this question. I'm workig on this since 2 days.. But nothing. Do you resolve this problem? I added .slider-pager { display:none; } but the dots still remain!
May be you can do like this;
paginationType: 'custom',
paginationBulletRender: function (index, className) {
return '';
}
This is better than pagination:false
I am trying to hide a component and update the image in a button when I click said button. I have managed to hide the component by doing the follow:
{<MyAwesomeComponent /> unless #state.hide}
And I change the state by doing:
toggleComponent = ->
#setState
hide: !#state.hide
. . .
<div
onClick={#toggleComponent}>
<img
src="img/interface/icon-chevron-left.png"
className={if #hide then "hidden"}/>
</div>
Unfortunatelly the {if #hide then "hidden"} doesn't seem to work. Any ideas on how to do this?
The hide property is set on #state, not on the component instance.
if #state.hide then "hidden"
I don't know if it is an easy question but i couldn't find the solution. I want to create 10 buttons in dojo like the button below.
<div style="right: 1px">
<button data-dojo-type="dijit.form.Button" id="SaveChangesDataGrid1" onclick="SaveChanges()">
Save</button>
</div>
but each button with different ID but the same function onClick. so what i want is when the button is clicked the id of the clicked button will be known in the function.
I am using dojo 1.8 any ideas?.
Change your onclick="SaveChanges()" to onclick="SaveChanges(event)" or get rid of it and use data-dojo-props:
<button
data-dojo-type="dijit.form.Button"
data-dojo-props="onClick:SaveChanges"
id="SaveChangesDataGrid2"
>
SaveChangesDataGrid2
</button>
Start your SaveChanges() this way to get id:
require([
"dijit/registry",
"dijit/form/Button",
], function(
registry
) {
window.SaveChanges = function(event) {
var button = registry.getEnclosingWidget(event.target);
console.log("onclick id:", button.id);
}
});
See it in action at jsFiddle: http://jsfiddle.net/phusick/WfdKF/