Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="myItems">
  <div ng-controller="ItemRowsCtrl">
    <div class="row clearfix" ng-repeat="itemRow in itemRows">
        <div class="btn-group btn-group-justified btn-group-lg">
           <div class="btn-group" ng-repeat="item in itemRow">
                <button type="button" class="btn btn-xlarge btn-primary-items" data-price="{{item.price}}">{{item.name}}</button>
           </div>
        </div>
    </div>
  </div>
</body>
</html>
 
var myApp = angular.module('myItems',[]);
​
myApp.controller('ItemRowsCtrl', ['$scope', function($scope) {
  var items = [
    { name: "item1", price: "1.05" },
    { name: "item2", price: "2.05" },
    { name: "item3", price: "2.55" },
    { name: "item4", price: "2.65" },
    { name: "item5", price: "3.05" },
    { name: "item6", price: "4.95" },
    { name: "item7", price: "4.15" },
    { name: "item8", price: "1.15" },
    { name: "item9", price: "1.95" }
  ];
  var itemRows = [];
  for (var i = 0; i < items.length; ++i) {
    if (i % 3 === 0) {
        itemRows.push([]);
    }
    var itemRow = itemRows[itemRows.length - 1];
    itemRow.push(items[i]);
  };  
  $scope.itemRows = itemRows;
}]);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
bguizpro
0viewers