I am using the ionic framework.
I have multiple slide boxes being generated by ng-repeat. For each slide box I wanted to have a section that will appear underneath when the button in the ion-slide is clicked. The code below explains what am I trying to do and what does and does not work. Any help would be greatly appreciated!
<ion-slide-box show-pager="false">
<ion-slide>
TEST111111111111
</ion-slide>
<ion-slide>
TEST222222222222
</ion-slide>
<ion-slide>
TEST333333333333
<button class="button button-dark" ng-click="test = !test">
Test
</button>
Works > True or False? > {{test}}
</ion-slide>
</ion-slide-box>
Does not work > True or False? > {{test}}
You need to use a variable with a . (dot). See Understanding Scopes in AngularJs
<ion-slide-box show-pager="false">
<ion-slide>
TEST111111111111
</ion-slide>
<ion-slide>
TEST222222222222
</ion-slide>
<ion-slide>
TEST333333333333
<button class="button button-dark" ng-click="someObject.test = !someObject.test">
Test
</button>
Works > True or False? > {{someObject.test}}
</ion-slide>
</ion-slide-box>
Does not work > True or False? > {{someObject.test}}
And make sure that in your controller you also initialize a value for someObject
$scope.someObject = {
test: false
};
Related
I have a basic slider in Ionic 2
<ion-slides>
<ion-slide>
<h1>Slide 1</h1>
<button (click)="doAction()">Click me</button>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
And in my ts file
doAction() {
console.log("clicked");
}
Clicking the button does nothing. If I place the button anywhere outside the slider it works fine. Is the slider capturing the click event somehow?
If you inspect your button , you will see (.button-inner).
So, changing it to outer it would make it work fine.
<ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
I am using ionic Framework version 1 .When i use the ion-slide-box
auto play="true" that auto speed little bit speed .
1.How i reduce that speed?
2.Possible to reduce that next slider Timing?
3.How to i reduce that speed?
I would not suggest using ion-slide-box, since it is deprecated and will be removed.
Deprecated API
will be removed in the next Ionic release in favor of the new
ion-slides component. Don't depend on the internal behavior of this
widget - source.
Instead use the new ion-slides based on Swiper API. This API offers a lot more flexibility with slides (see Swiper Parameters section in link). For instance you can reduce the speed of a transition and even auto-play speed of certain slides.
Auto Play
Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
If you need to specify different delay for specific slides you can do
it by using data-swiper-autoplay (in ms) attribute on slide:
<div class="swiper-slide" data-swiper-autoplay="2000">
Basic example using new slides:
HTML
<ion-content scroll="false">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide-page>
<ion-slide-page>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide-page>
<ion-slide-page>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide-page>
</ion-slides>
</ion-content>
Controller
$scope.options = {
loop: false,
effect: 'fade',
speed: 500,
}
$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
// data.slider is the instance of Swiper
$scope.slider = data.slider;
});
$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
console.log('Slide change is beginning');
});
$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
// note: the indexes are 0-based
$scope.activeIndex = data.slider.activeIndex;
$scope.previousIndex = data.slider.previousIndex;
});
Full Codepen Example here.
You need to use slide-interval properties of ion-slide-box.
For example :
<ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval="1000">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
Fore more properties read here.
Hopes this will help you !!
I am creating a mobile app with Ionic framework. I am using ion-slide-box
<ion-slide-box class="slidebox" on-slide-changed="change(index)">
<ion-slide>
<img src="img/johnson.jpg" id="album">
</ion-slide>
<ion-slide>
<img src="img/eiston.jpg" id="album">
</ion-slide>
<ion-slide>
<img src="img/vera.jpg" id="album">
</ion-slide>
<ion-slide>
<img src="img/max.jpg" id="album">
</ion-slide>
</ion-slide-box>
I want to know the total slide number
$scope.change= function(index){
console.log('currentindex '+index); //i get the correct current index
console.log($ionicSlideBoxDelegate.currentIndex()); //I get undefined
alert($ionicSlideBoxDelegate.slidesCount()); //I get undefined
}
I tried a lot of things, nothing seems to be working with $ionicSlideBoxDelegate? Is it deprecated?
You should use <ion-slides> instead of <ion-slide-box>, then try to add a modal to slider param i.e:
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<div><h1>some Text</h1></div>
</ion-slide-page>
</ion-slides>
then in your controller you will use 'data.activeIndex' to get the current index using a handler as:
$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
alert( data.activeIndex );
});
you can consult the doc:
http://ionicframework.com/docs/api/directive/ionSlides/
Ionic's new slide is derived from swiper.
According to ionic's documentation it is deprecated in favour of the newer component.
You will have to do a bit of research into how to use the newer component as it is not documented very well.
I want to load the data as soon as I slide. I am using ionic-slidebox like,
<ion-content>
<ion-slide-box on-slide-changed="slideHasChanged($index)" active-slide="1" show-pager="false">
<ion-slide disable-scroll="false">
<ion-scroll>
<div> loading some data</div>
</ion-scroll>
</ion-slide>
<ion-slide>
</ion-slide>
</ion-slide-box>
</ion-content>
on-slide-changed I am calling slide Has Changed()function and doing state.go() I am getting the slider effect but because of the empty slide in code I am getting the empty slide
I have to load the data in the empty slide. I have tried by placing the ng-controller and loading the template in the empty slide
I am working on an Ionic app, and want to have a slider box, with each slide representing an ion-view.
Slide Box -
<ion-view>
<ion-content>
<div class="row">
<ion-slide-box class="col" auto-play="false" does-continue="false">
<ion-slide>
<ion-nav-view name="view-1" ></ion-nav-view>
</ion-slide>
<ion-slide>
<ion-nav-view name="view-2" ></ion-nav-view>
</ion-slide>
</ion-slide-box>
</div>
</ion-content>
</ion-view>
Route
.state('parent.view-1', {
url: "/view1",
views: {
"view-1": {
templateUrl: "app/parent/view-1.html"
}
}
})
One of the views - view-1.html -
<ion-view>
<ion-content>
<h1>View 1</h1>
</ion-content>
</ion-view>
The issue is that view-1 is not displaying inside the first slide. Can anyone tell what can be the issue here? Also, Is this the correct way to display slidable views? Please suggest. I am a beginner in Ionic.
I'm working on a similar set up, and I found that his doesn't work very neatly.
Since your ion slide box is inside ion-view tags, I'm assuming that this template is being injected into a somewhere in a higher level?
Try to inject instead:
<ion-slide-box class="col" auto-play="false" does-continue="false">
<ion-slide>
<ion-nav-view name="view-1" ></ion-nav-view>
</ion-slide>
<ion-slide>
<ion-nav-view name="view-2" ></ion-nav-view>
</ion-slide>
</ion-slide-box>
inside your without and other stuff wrapping it.