I have a JSON which consists of image,title and description.(json of news) I want to create view that shows the image,title and description in a page. I should be able to slide the page to view the next news item. I'm using angularjs and ionic framework to do this.
The way i tried it shows all the images in the same page
Mycode
<ion-view title="News" ng-controller="NewsCtrl">
<ion-content class="has-header" scroll="true" padding="true">
<ion-list>
<ion-item ng-repeat="newsS in news">
<ion-slide>
<img ng-src= http://@@@@@@@@/{{newsS.image}}>
<b><h4 class="list-group-item-heading">{{newsS.title}}</h4></b><br>
<h5 class="list-group-item-text">{{newsS.description}}</h5>
</ion-slide>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
How can i do this? For Ex: my json looks like this
{
News: [
{
id: "1",
title: "dgdgdgdgdg",
image: "uploads/news/******_logo.jpg",
status: "yes"
},
{
id: "3",
title: "dgdgdgdgdgdg",
description: "Solution by dgdgdgl",
image: "uploads/news/2013_batman_arkham_origins-1920x1080.jpg",
status: "yes"
},
]
}
Use the ion-slide-box
<ion-slide-box>
<ion-slide ng-repeat="n in news">
<img ng-src="{{n.image}}">
</ion-slide>
</ion-slide-box>
Reference: