Obrigado por suas sugestões, você me pegou no caminho certo!
Vamos para uma explicação completa:
Por padrão, AngularJS http get query retorna um objeto
Portanto, se você quiser usar a função @Ariel Array.prototype.chunk, você deve primeiro transformar o objeto em um array.
E então, para usar a função chunk em SEU CONTROLADOR, caso contrário, se usada diretamente no ng-repeat, ele levará você a um erro infdig . O controlador final parece:
// Initialize products to empty list
$scope.products = [];
// Load products from config file
$resource("/json/shoppinglist.json").get(function (data_object)
{
// Transform object into array
var data_array =[];
for( var i in data_object ) {
if (typeof data_object[i] === 'object' && data_object[i].hasOwnProperty("name")){
data_array.push(data_object[i]);
}
}
// Chunk Array and apply scope
$scope.products = data_array.chunk(3);
});
E o HTML se torna:
<div class="row" ng-repeat="productrow in products">
<div class="col-sm-4" ng-repeat="product in productrow">
Por outro lado, decidi retornar diretamente um array [] em vez de um objeto {} do meu arquivo JSON. Desta forma, o controlador se torna (observe a sintaxe específica isArray: true ):
// Initialize products to empty list
$scope.products = [];
// Load products from config file
$resource("/json/shoppinglist.json").query({method:'GET', isArray:true}, function (data_array)
{
$scope.products = data_array.chunk(3);
});
HTML permanece igual ao anterior.
OTIMIZAÇÃO
A última questão em suspense é: como torná-lo 100% AngularJS sem estender o array javascript com a função chunk ... se algumas pessoas estiverem interessadas em nos mostrar se ng-repeat-start e ng-repeat-end são o caminho a seguir. . Estou curioso ;)
SOLUÇÃO DE ANDREW
Graças a @Andrew, agora sabemos que adicionar uma classe bootstrap clearfix a cada três (ou qualquer número) elemento corrige o problema de exibição da altura do bloco diferente.
Então, o HTML se torna:
<div class="row">
<div ng-repeat="product in products">
<div ng-if="$index % 3 == 0" class="clearfix"></div>
<div class="col-sm-4"> My product descrition with {{product.property}}
E seu controlador permanece bastante suave com a função chunck removida :
// Initialize products to empty list
$scope.products = [];
// Load products from config file
$resource("/json/shoppinglist.json").query({method:'GET', isArray:true}, function (data_array)
{
//$scope.products = data_array.chunk(3);
$scope.products = data_array;
});