CODEWITHSUNDEEP
htmlcssangularjstwitter-bootstrapangularjs-ng-repeat
Kalagar
Kalagar

Reputation: 379

how to show ng-repeat horizontal?

this is an angularjs and bootstrap. I need to use ng-repeat horizontally. how can I use CSS or bootstrap to show my thumbnails horizontally ?

<div class="row">
    <ul class="col-md-4" id="phones">
        <li class="thumbnail" ng-repeat="phone in topSmartPhone">
            <img src="{{phone.img}}" alt="" />
            <div class="caption">
                <h3>{{phone.name}}</h3>
                <p><strong>Size : </strong> {{phone.size}}</p>
                <p><strong>RAM :</strong> {{phone.ram}}</p>
                <p><strong>Camera :</strong> {{phone.camera}}</p>
                <p><strong>Battry :</strong> {{phone.battery}}</p>
                <p id="description">{{phone.discription}}</p>
            </div>
        </li>
    </ul>
</div>

Upvotes: 1

Views: 11823

Answers (4)

Kalagar
Kalagar

Reputation: 379

ng-repeat must be in ul element not li.

<div class="row">
        <ul id="" class="col-md-4 col-xs-6" ng-repeat="phone in topSmartPhone">
            <li class="thumbnail">
                <img src="{{phone.img}}" alt="" />
                <div class="caption">
                    <h3>{{phone.name}}</h3>
                    <p><strong>Size : </strong> {{phone.size}}</p>
                    <p><strong>RAM :</strong> {{phone.ram}}</p>
                    <p><strong>Camera :</strong> {{phone.camera}}</p>
                    <p><strong>Battry :</strong> {{phone.battery}}</p>
                    <p id="description">{{phone.discription}}</p>
                </div>
            </li>
        </ul>
    </div>

Upvotes: 2

Hadi
Hadi

Reputation: 17289

try this.

var app= angular.module("myapp",[]);
        app.controller("ctrl",function($scope){
            $scope.items = [1,2,3,4,5];

        });
.thumbnail{
   float:left;
    width: 60px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="ctrl">
   <div class="row">
    <ul class="col-md-4" id="phones">
        <li class="thumbnail" ng-repeat="item in items">
           
            <div class="caption">
                <h3>{{item}}</h3>
            </div>
        </li>
    </ul>
</div>
</div>

Upvotes: 2

jasper
jasper

Reputation: 945

So if I understand correctly you have multiple thumbnails? In that case the CSS would look like this: 

.thumbnail{ 
   display: inline-block;
   width: 19%; //this would be if you would perhaps want 5 thumbnails in a row I have know idea how many you want on a row
}

Upvotes: 2

Hady Allam
Hady Allam

Reputation: 128

remove class="col-md-4" from ul element and add class="thumbnail col-md-12" to li element

Upvotes: 0

Related Questions