感谢您的建议,您使我步入正轨!
让我们进行完整的解释:
默认情况下,AngularJS http get查询返回一个对象
因此,如果要使用@Ariel Array.prototype.chunk函数,则必须首先将对象转换为数组。
然后在您的控制器中使用块函数,否则,如果直接将其用于ng-repeat中,则会导致输入错误。最终的控制器看起来是:
// 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);
});
HTML变成:
<div class="row" ng-repeat="productrow in products">
<div class="col-sm-4" ng-repeat="product in productrow">
另一方面,我决定直接从JSON文件中返回数组[]而不是对象{}。这样,控制器变为(请注意特定语法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保持与上面相同。
优化
悬念中的最后一个问题是:如何在不使用块函数扩展JavaScript数组的情况下使其成为100%AngularJS ...如果有人有兴趣向我们展示ng-repeat-start和ng-repeat-end是否是可行的方法.. 。 我很好奇 ;)
安德鲁的解决方案
感谢@Andrew,我们现在知道每三个(或任何数量)个元素添加一个bootstrap clearfix类,可以从不同块的高度纠正显示问题。
因此HTML变为:
<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}}
并且您的控制器保持了相当软的状态,并删除了chunck函数:
// 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;
});