Question

有没有办法在ng-repeat指令中循环遍历多个数组？

我试过像

这样的东西

<ul>
    <li ng-repeat="sale in randomSales" ng-repeat="image in imageUrls">
        <div display-sale></div>
    </li>
</ul>

或

<ul>
    <li ng-repeat="sale in randomSales, image in imageUrls">
        <div display-sale></div>
    </li>
</ul>

但它不起作用。

我可以用另一种方式解决这个问题，但我想知道这是否可行！

编辑：这是我的控制器＆amp;指令：

    app.controller('RandomController', ['$rootScope', '$scope',function($rootScope, $scope) {
        $scope.randomSales=[];
        $scope.imageUrls = [];
        for(var i= 0; i < displayrandomSalesNumber ; i++){
            var randomNumber = Math.floor((Math.random() * $rootScope.sales.length-1) + 1);
            $scope.randomSales.push($rootScope.sales[randomNumber]);
            $scope.imageUrls.push($rootScope.sales[randomNumber].image_urls["300x280"][0].url);
        }
        console.log($scope.randomSales);
    }])
        .directive('displaySale', function() {
        return {
            template:   '<div class="center"><a href="#/sale/{{sale.store}}/{{sale.sale_key}}">' +
                            '<header><h2>{{sale.name}}</h2><h4>in {{sale.store}}</h4></header>' +
                            '<article>' +
                                '<p>From : {{sale.begins}} To : {{sale.ends}}</p>' +
                                '<p class="center"><img  ng-src="{{image}}"/></p>' +
                                '<p>{{sale.description}}</p>' +
                            '</article>' +
                        '</a></div>'
        };
    });

图片已在$ scope.randomSales中，我可以使用{{sale.image_urls [＆＃34; 300x280＆＃34;] [0] .url}}访问它，但我得到一个解析错误

Answer 1

你提出的第一个解决方案是错误的，我们在一个Html标签中不能有两个ng-repeat属性，我不确定第二个。但你可以尝试这样..我认为它会起作用。

<ul>
    <li ng-repeat="sale in randomSales">
       <span ng-repeat="image in imageUrls">
        <div display-sale></div>
       </span>
    </li>
</ul>

Answer 2

要使其工作，您可以尝试执行以下操作： - 将2个数组合并到表示imageUrls和randomSales的一个对象数组中。 - 在模板中迭代它们。

例如：

var maxArrayLength = Math.max(randomSales.length, imageUrls.length);
var i = 0;
var result = []; //will put items  {sale: ..., image}
for (i =0; i < maxArrayLength; i++){
   var currentSale = randomSales[i] != null ? randomSales[i] : null;
   var currentImage = imageUrls[i] != null ? imageUrls[i] : null;
   result.push({sale: currentSale, image: currentImage})
}
return result;

他们可以使用此数组迭代角度模板。

多个阵列上的ng-repeat

2 个答案: