I just did the experiment, clean project start, monaca create, then went into index.html, copied and pasted your code from the codepen. Again, it shows the first slide but the two following are blank, even though they show when you inspect the element.

@fran-diox: Hey Fran, yes I do realize it works there, let me elaborate, I modified the tutorial and it worked. I then tried it in my own project and it did not work for some reason it was not working for me in my project. I inspected the element and although it was there, it was not showing on the screen. I proceeded to create a new monaca project via, monaca create, and I try it there. It also did not work. Maybe there is something wrong with the current version from bower?

Hello, I am currently using OnsenUI2 with AngularJS, I was trying to use the ons-carousel, with an ons-carousel-item in an ng-repeat. Although the first ons-carousel-item shows up the following ones do not display anything. Here is the code:

 <ons-carousel var="carousel" ons-postchange="console.log('Changed to ' + $event.activeIndex)" fullscreen swipeable auto-scroll overscrollable >
    <ons-carousel-item style="background-color: #085078;"  ng-repeat="i in [{'id':1},{'id':2},{'id':3}]">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;" >
        BLUE {{i.id}}
      </div>
    </ons-carousel-item>
</ons-carousel>

I am well aware of the four animations, I am currently using fade, the default is none, then there is slide, simpleslide, and lift, there is one missing though that might be important. It would complete all the normal animations, the pop page animation.

I want the pop page animation, that one is not offered as any of the options. I was wondering if there was another way of getting it.

Hey Fran,

Thank you for your time, you understood correctly and your solution solved my problem! Everything except for one thing, when you use resetToPage with animation set to ‘simpleslide’ or ‘slide’, the animation pushes the page instead of popping, so it looks like its pushing a page when in fact it should “pop” the page and reset to the “home” page. Is there a way to get the animation to do a popping animation instead of a pushing animation on the resetToPage method?

Hello I am currently developing an app for Android and iOS. The app uses a tabbar and in each tabbar item there is a navigator.
The tabbar initialization lets you specify properties/attributes like persistent and it also lets to listen to the “reactive” event. This event fires if the current active tab is tapped again.
My desire behavior is to have the persistent property of the tab and to have the reactive behaviour in such a way that if I press the current active tab and fire the reactive event, I pop all the pages in the stack for that current navigator, another way to see it is to simply get the tabbar item reinstantiated just like it does when the persistent property is not defined. It would be nice to have it sort of like Facebook, where the “reactive” event simply takes you to the “home” for that tab.
I was wondering if there was a way to access the tabbar refresh event or reinstantiate tabbar item event, or event better, if someone could provide an example of popping a single page to get back to the “home” tab page, again just like Facebook does.

Code:

//tabs.html sample
<ons-tabbar var="tabbar">
       <ons-tab active="true" page="views/home/home.html" >
           <div class="tab">
               <ons-icon icon="fa-home" class="tab-icon"></ons-icon>
               <div class="tab-label">{{"HOME"|translate}}</div>
           </div>
       </ons-tab>
          ...
//Home page for home tab, views/home/home.html
<ons-navigator var="homeNavigator" >
    <ons-page ng-controller="HomeController" ng-device-backbutton="homeDeviceBackButton()">
        <ons-toolbar>
            <div class="center">{{"HEADER_MESSAGE_HOME"|translate}}</div>
            <div class="right">
                <ons-toolbar-button ng-click="homeNavigator.pushPage('views/tabs/info-page-tabs.html',{param:home})">
                    <ons-icon icon="ion-ios-information-outline"></ons-icon>
                </ons-toolbar-button>
            </div>
        </ons-toolbar>
         ...

I have tried different methods such as popping all the pages except the first one, it looks aweful, or replacing/destroying pages in the navigator stack, this has problems because of the way I defined navigator in the “home” tab.

Any suggestions?

Hello, I am using the first version of OnsenUI with Angular 1 and I wanted to have some scrolling animations like current apps, such as facebook, twitter, etc. Basically it listens to the scroll event on the page and changes the appearance of the toolbar based on the position of the page. The problem is that OnsenUI blocks all the scroll listeners, is there a way to get that scroll listener from any element in the dom using onsen or by other methods. I tried multiple things via jquery and Angular directives and had no luck.

Thank you!

For the tabbar, there is support to pass a parameter as an option but there is no support to get that parameter.

For the past 6 months I have been working for a hospital in Montreal to provide patients of Radiation Oncology personalized information about waiting times and electronic health records.
The waiting times are estimated using a machine learning algorithm that mines data from the hospital databases.
To meet this end, we have built an app that uses Cordova, AngularJs, and OnsenUI in the front-end.
Our app offers the following features:
*Encrypted communication with the hospital network
*A summary display of the patient’s treatment
*Access to specific patient documents
*An appointment schedule, waiting times, and a check-in tool with geolocation
*Hospital maps with appointment locations
*A messaging system for communication between doctor and patient
*Disease-specific educational resources (In-development)
*A notification system for appointment alerts(In-development)
*A questionnaire tool for satisfaction and patient reported outcome data(In-development)
*Lab results for the patient.(In-development)

Here is a link to the demo,

https://depdocs.com/opal

Let us know what you think!