CODEWITHSUNDEEP
angularjstwitter-bootstrap
Mat.Now
Mat.Now

Reputation: 1725

ng-repeat changing position left to right

I have one problem with angular ng-repeat and bootstrap. I tried divide view on two parts left image, right description, but next line oposite, left description and right image. I would like something like picture below

<div class="container">
  <div class="row">
    <div ng-repeat="item in items">
      <div class="col-xs-6">
        <img src="{{item.image}}" alt="#"/>
      </div>
      <div class="col-xs-6">
        <div class="description">
          <p>{{item.description}}</p>
        </div>
      </div>
    </div>
  </div>
</div>

enter image description here

Upvotes: 0

Views: 834

Answers (2)

Naren Murali
Naren Murali

Reputation: 56725

This is my solution. Using ng-class we check if the current index ($index) divided by 2 is zero then we add the float classes either .left or .right.

JSFiddle Demo

<div ng-controller='MyController'>
    <div ng-repeat="val in arr">
      <div class="row clearfix">
        <div class="col-xs-6" ng-class="$index % 2 === 0 ? 'left':'right'">
          {{val}}
        </div>
        <div class="col-xs-6" ng-class="$index % 2 === 0 ? 'right':'left'">
          <img src="http://lorempixel.com/400/200/" alt="">
        </div>
      </div>
    </div>
</div>

Upvotes: 1

jigar gala
jigar gala

Reputation: 1650

You can check for odd or even iteration in the repeat loop and apply your class with either float left or right respectively.

<div class="container">
  <div class="row">
    <div ng-repeat="item in items" ng-class-odd="'img-left'">
      <div class="col-xs-6 img-holder">
        <img src=".." alt="#"/>
      </div>
      <div class="col-xs-6 text-holder">
        <div class="description">
          <p>........</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

 .img-left .img-holder{
    float:left;
    }
    .img-left .text-holder{
    float:right;
    }

you can handle even condition directly in CSS or like above.

Upvotes: 1

Related Questions