If you want to ensure that your JSON response is correctly structured for the angular directive, you may need to reformat it or preprocess it before passing it on.
var itemRows = [
[{ 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" }]
];
Make sure to pass itemRows as the object to be displayed in the template instead of individual items.
If changing the backend is not feasible, pre-processing the data is recommended following this approach:
In Javascript:
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;
}]);
In your template:
<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>
JsBin answer