Search This Blog

Saturday 19 March 2016

Create Row every after 2 item in Angular ng-repeat - Ionic Grid/ tiles in ionic

Problem Statement:
i am having my elements which are to be shown in two column tiles. my data binding will be done dynamically from angular code behind. i can divide my row into columns but keeping data into that column in an ng-repeat is the challenge.

solution is simple, use angulars inbuilt variable $even of $index and show column for $index and $index+1 in column 1 and column 2 respectively.

for every even index 2 column will be set with $index and next elements and in odd index loop will not go in. problem solved. below is the sample code

Solution:
<div class="row" ng-repeat="sensors in SecurityDevices" ng-if="$even">
<div class="col col-49" >
<div class="imageIcon">
<img src="/img/devices/fire.png">
</div>
<div class="DeviceName">{{SecurityDevices[$index].Model}}</div>
<div class="FriendlyName">Kids Room</div>
</div>
<div class="col col-49" >
<div class="imageIcon">
<img src="/img/devices/motion.png">
</div>
<div class="DeviceName">{{SecurityDevices[$index+1].Model}}</div>
<div class="FriendlyName">Kids Room</div>
</div>
</div>

No comments:

Post a Comment