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>

enter image description here

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;
}
share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.