Hi guys
I’m wondering if someone can help me achieve a layout, where by the following HTML is showed as a single column on a phone, but instead of stretching to 1 huge and ugly column on a tablet, it is instead doubled up.
So there’d be a list of items under each other in 1 column on a phone, but the list would be 2 columns on a tablet. This is pretty standard behaviour on Bootstrap but I’m not sure how to achieve it in Ionic.
The HTML looks similar to:
`
{{::onlineContent.Category}}
{{::onlineContent.title}}
By {{::onlineContent.info§}}
{{::onlineContent["other info"]}} credits
FREE
{{::onlineContent["last info"]}}
`
Thanks guys
So I found out how to create the layout I’m looking for
By creating 2 columns and using a row responsive-sm it works, the only problem is, this is all wrapped in an ng-repeat, so now I have the issue where everything is duplicated. So the layout is right, but there’s two of everything.
I’m not sure how to tell the 1 column to be ng-repeat index and the other to be ng-repeat index+1.
Any thoughts guys?
For anyone who is interested, I solved this in the following way:
I had 2 ng-repeats, 1 for the rows and 1 for the items making up the rows.
On my controller I have a function which breaks the original input array (all the items) into rows with items in each row:
$scope.breakIntoRows = function(array, columns) { var rowArray = []; for (var i=0; i<array.length; i+=columns) { rowArray.push(array.slice(i, i+columns)); } return rowArray; }
Then I call the function when I get the data back from my factory:
$scope.rows = $scope.breakIntoRows(result.videos, 2);
Then on the view it looks as follows:
<div class="row responsive-md" ng-repeat="row in rows">
`
`
Hope this helps someone