macha devendher macha devendher - 1 month ago 18
AngularJS Question

bootstrap panel with angular ng-repeat

I am trying to do angular ng-repeat with bootstrap panel using below code

<div class="row" ng-repeat="user in users |filter:search| pagination: curPage * pageSize | limitTo: pageSize">
<div class="col-sm-4">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">{{user.firstname}}</div>

<div class="panel-body">Panel Content</div>
<div class="panel-footer">Footer</div>
</div>
</div>

</div>
</div>


It's working fine but its appearance is vertical not side by side. How can I set these panels side by side?

Is there any way to achieve these features?

Thanks in advance.

Answer

Use ng-repeat over .col-sm-4 as follows

<div class="row">
  <div class="col-sm-4" 
       data-ng-repeat="user in users |filter:search| pagination: curPage * pageSize | limitTo: pageSize">
     <div class="panel-group">
        <div class="panel panel-primary">
          <div class="panel-heading">{{user.firstname}}</div>
          <div class="panel-body">Panel Content</div>
          <div class="panel-footer">Footer</div>
    </div>
</div>

Bootstrap row works on 12 grid. But if a row has more than 12 grid it will wrap it new line..

Comments