CODEWITHSUNDEEP
angularjsonsen-ui
Mark B
Mark B

Reputation: 167

Onsen carousel & template with json

I have an Onsen-UI template/index where I have a carousel and have each carousel-item calling a ons-template id (html). One of those templates is calling for ng-controller (which is calling for json api) and has usual javascript within it.

If I view the index.html in Chrome, the list shows but when I build it as phonegap app and run the apk on my android device, the list never appears. It just loads in a loop without 'loading' it.

Also, when I click on a list item it should take me to another html template to display the correct information and where (page.html), which Chrome doesn't do (could be just an issue in chrome).

I'm hoping if I get the list to display on my app, then the second part would fix itself or do I need to do some extra tweaking?

Here is my template code calling the controller:

<ons-template id="news.html">
    <ons-page>
         <div class="app-page opacity-bar">

    <div class="app-page-content">
   <div class="app-page news-page" ng-controller="newsController" data-ng-init="getAllRecords()">

      <ons-list modifier="news">

        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="item in items" ng-click="showPost($index)">
          <ons-row>
            <ons-col width="95px">
              <img ng-show="{{ item.thumbnail_images }}" ng-src="{{ item.thumbnail_images.thumbnail.url }}" class="thumbnail">
            </ons-col>
            <ons-col>
              <div class="name">
            {{ item.title | limitTo: 15 }}...
              </div>
              <div class="location" ng-show="{{ item.categories }}">
                <i class="ion-pricetags"></i> <span ng-repeat="cat in item.categories">{{cat.title}} </span>
              </div>
              <div class="desc">
            {{ item.excerpt | htmlToPlaintext | limitTo: 60 }}...                
              </div>
            </ons-col>
            <ons-col width="40px"></ons-col>
          </ons-row>
        </ons-list-item>

      </ons-list>

      <ons-button id="moreButton" modifier="large" should-spin="{{isFetching}}" ng-click="nextPage()">more news</ons-button>

    </div></div></div>
    </ons-page>
</ons-template>

Upvotes: 1

Views: 281

Answers (2)

Charitha Goonewardena
Charitha Goonewardena

Reputation: 4714

May be this link will help for you, Check with the code

  <ons-page>
    <ons-toolbar>
      <div class="center">Carousel</div>
    </ons-toolbar>
    <ons-carousel ng-controller="CarouselController" swipeable auto-scroll fullscreen var="carousel">
      <ons-carousel-item style="background-color: gray;">
        <div class="item-label">GRAY</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #085078;">
        <div class="item-label">BLUE</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #373B44;">
        <div class="item-label">DARK</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #D38312;">
        <div class="item-label">ORANGE</div>
      </ons-carousel-item>
      <ons-carousel-cover>
        <div class="bullets">
          <span 
            ng-repeat="idx in indices"
            ng-class="{'active': idx === carousel.getActiveCarouselItemIndex()}">
            •
          </span>
        </div>
      </ons-carousel-cover>

    </ons-carousel>
  </ons-page>

Upvotes: 0

user3137766
user3137766

Reputation:

The carousel is very weak, bad implemented, i have same issue too, and the support is NULL

Upvotes: 0

Related Questions