Eunice Chia Eunice Chia - 4 months ago 17
AngularJS Question

ng-repeat multiple row using bootstrap

<div class="row">
<div class="col-xs-12">
<button ng-repeat="item in items track by $index">
{{item}}
</button>
</div>
</div>


I have 3 item and would like to put them like this

1 2 3
4 5 6


so I suppose to have 2 row. But my ng-repeat is the item itself. How do I solve above case?

Answer

Try this ,

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = [
  {
     id: 1,
     value: 'column1'
  },
  {
     id: 2,
     value: 'column2'
  },
 {
     id: 3,
     value: 'column3'
  },
  {
     id: 4,
     value: 'column4'
  },
   {
     id: 5,
     value: 'column5'
  },
  {
     id: 6,
     value: 'column6'
  },
 {
     id: 7,
     value: 'column7'
  },
  {
     id: 8,
     value: 'column8'
  },
];
});
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" data-semver="4.0.0-alpha.2" data-require="bootstrap@*" />
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" data-semver="4.0.0-alpha.2" data-require="bootstrap@*"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
   
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker" ng-controller="MainCtrl">
    <div  ng-repeat="item in items">
      <div class="col-xs-4">
        {{item.value}}
     </div>
     
    </div>
  </body>

</html>

Comments