javascript - 从html代码中的angularjs以特定数量的集合重复div标签

我有下面的div标签，我想重复多次

    <div class="item">
        <div class="col-xs-3 " style="margin-right:-50px;" ng-repeat="(key, value) in products.slice(4, 8) track by $index">
             <img src= {{value.imageUrl}} alt="No Image"/>
        </div>
   </div>

我想重复以上整个div标记多次，每个div标记一次显示4个图像，即下一个div标记将在products.slice（8，12）track by$index中有ng repeat=（key，value）等，直到value对象中有图像为止。如何使用angularjs实现这一点？
谢谢你的帮助。提前谢谢。

最佳答案

我认为应该在提供products数组的控制器中更好地准备数据。你可能会做这一切内联，但我猜这将是相当恶劣的。
这是我的建议。
下面的代码将为您提供数组，每个数组包含四个图像条目。您可以通过修改count变量和循环中的重置来更改该值。
示例controller.js

'use strict';

app.controller('ExampleCtrl', function ($scope) {

    var products = [
            {'name':'Test','url':'some_image.jpg'},
            {'name':'Test','url':'some_image.jpg'},
            {'name':'Test','url':'some_image.jpg'},
            {'name':'Test','url':'some_image.jpg'},
            {'name':'Test','url':'some_image.jpg'},
            {'name':'Test','url':'some_image.jpg'},
            {'name':'Test','url':'some_image.jpg'},
            {'name':'Test','url':'some_image.jpg'},
            {'name':'Test','url':'some_image.jpg'}
        ];

        var products_page = [];
        var products_pages = [];
        var count = 4;

        $scope.products_pages = products_pages;

        for(var i=0;i<products.length;i++){
            if(count > 1){
                products_page.push(products[i]);
                count--;
                if(products.length === i+1){
                    products_pages.push(products_page);
                    return;
                }
            }else{
                products_page.push(products[i]);
                products_pages.push(products_page);
                products_page = [];
                count = 4;
            }
        }
});

现在这样你就可以在HTML中完成下面的工作了。

<div class="item" ng-repeat="page in products_pages">
      <div class="col-xs-3 " style="margin-right:-50px;" ng-repeat="image in page">
             <img src= {{image.url}} alt="No Image" />
      </div>
 </div>

我还没有测试过，但我认为这应该能解决问题。如果你需要它全部在线，其他人将不得不投入。