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>
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