I want to display image like in first row 3 image, second row 3 image, third row 2 images and continue so on. So i prepare server data like that only(Please have a look on server response). But i failed in diplaying image in view. Please help me on this
<ion-view view-title="" class="login" hide-back-button="true">
<ion-content style="top: 178px;background-color:#EFEFEF;" ng-show="viewEntered">
<div class="row">
<div class="col no-padding">
<h5 class="title text-align-center">Advertise With Us</h5>
</div>
</div>
<div class="row gallery">
<div ng-if="category.token == 1" ng-class={ 'col col-33' : category.token == 1} ng-repeat="category in categoryList" ui-sref="app.categoryDetail({detailsId: category.id})">
<img ng-src={{category.icons}} width="100%" height="75px">
<div ng-if="advertisement.token == 2" class="col col-50" ng-repeat="advertisement in category.advertise" ui-sref="app.categoryDetail({detailsId: advertise.id})">
<img ng-src={{advertisement.icons}} width="100%" height="75px">
</div>
</div>
</div>
</ion-content>
</ion-view>
I want the the above result.
Below is the JSON data from Server for categoryList
"responseMsg": {
-
"0": {
"id": 1,
"name": "advertisement & media",
"icons": "http://localhost/helloKasaragodApi/static/icons/5842ad4533e5d.png",
"token": 1
},
-
"1": {
"id": 2,
"name": "automobiles",
"icons": "http://localhost/helloKasaragodApi/static/icons/5842ad5574ab9.png",
"token": 1
},
-
"2": {
"id": 3,
"name": "educations",
"icons": "http://localhost/helloKasaragodApi/static/icons/584662cb3af1a.png",
"token": 1
},
-
"3": {
"id": 4,
"name": "school & college",
"icons": "http://localhost/helloKasaragodApi/static/icons/584edeac22fac.png",
"token": 1
},
-
"4": {
"id": 5,
"name": "govt. offices",
"icons": "http://localhost/helloKasaragodApi/static/icons/584edec9e6661.png",
"token": 1
},
-
"5": {
"id": 6,
"name": "hotels",
"icons": "http://localhost/helloKasaragodApi/static/icons/584ede8a8b2ea.png",
"token": 1
},
-
"6": {
"id": 6,
"name": "hotels",
"icons": "http://localhost/helloKasaragodApi/static/icons/584ede8a8b2ea.png",
"token": 1,
-
"advertise": {
-
"4": {
"id": 4,
"profileId": 9,
"icons": "http://localhost/helloKasaragodApi/static/images/584ee1bbc4e1a.jpeg",
"token": 2
},
-
"5": {
"id": 5,
"profileId": 16,
"icons": "http://localhost/helloKasaragodApi/static/images/584ef23d34270.jpeg",
"token": 2
}
}
},
-
"7": {
"id": 6,
"name": "hotels",
"icons": "http://localhost/helloKasaragodApi/static/icons/584ede8a8b2ea.png",
"token": 1
},
-
"8": {
"id": 7,
"name": "hospitals",
"icons": "http://localhost/helloKasaragodApi/static/icons/584ede66f0823.png",
"token": 1
},
-
"9": {
"id": 8,
"name": "construction",
"icons": "http://localhost/helloKasaragodApi/static/icons/584edeff75862.png",
"token": 1
},
-
"10": {
"id": 9,
"name": "education",
"icons": "http://localhost/helloKasaragodApi/static/icons/584edf136e16e.png",
"token": 1
},
-
"11": {
"id": 10,
"name": "electronics & electricals",
"icons": "http://localhost/helloKasaragodApi/static/icons/584edf4536b0b.png",
"token": 1
},
-
"12": {
"id": 11,
"name": "fashion & life style",
"icons": "http://localhost/helloKasaragodApi/static/icons/584edf6e47f1a.png",
"token": 1,
-
"advertise": {
-
"6": {
"id": 6,
"profileId": 33,
"icons": "http://localhost/helloKasaragodApi/static/images/585fff0ecf91a.jpeg",
"token": 2
}
}
},
-
"13": {
"id": 12,
"name": "finance",
"icons": "http://localhost/helloKasaragodApi/static/icons/584edf817515a.png",
"token": 1
},
-
"14": {
"id": 12,
"name": "finance",
"icons": "http://localhost/helloKasaragodApi/static/icons/584edf817515a.png",
"token": 1
}
And my gallery css class code is like this
.gallery {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}