Question

为什么这是ng-repeat

<div class="row" ng-repeat="rows in pics">
    <a class="col-md-3" ng-repeat="pic in rows" data-lightbox="DCS_{{pic}}" href="./large/DCS_{{pic}}.jpg">
        <img src="./previews/DCS_{{pic}}.jpg" />
    </a>
</div>

使用此控制器

app.controller('galleryController', ['$scope', function($scope){
$scope.pics = [
    [8146],
    [8147],
    [8230],
    [8234]
],[
    [8253],
    [8295],
    [8311],
    [8344]
];
}]);

产生这样的标记？

<div class="row ng-scope" ng-repeat="rows in pics">
    <!-- ngRepeat: pic in rows --><a class="col-md-3 ng-scope" ng-repeat="pic in rows" data-lightbox="DCS_8146" href="./large/DCS_8146.jpg">
        <img src="./previews/DCS_8146.jpg">
    </a><!-- end ngRepeat: pic in rows -->
</div>
<div class="row ng-scope" ng-repeat="rows in pics">
    <!-- ngRepeat: pic in rows --><a class="col-md-3 ng-scope" ng-repeat="pic in rows" data-lightbox="DCS_8147" href="./large/DCS_8147.jpg">
        <img src="./previews/DCS_8147.jpg">
    </a><!-- end ngRepeat: pic in rows -->
</div>

即。对内部数组中的每个项重复<div class='row'>？

Answer 1

不，$scope.pics应该以不同的方式定义：

$scope.pics = [
   [8146, 8147, 8230, 8234],
   [8253, 8295, 8311, 8344]
];

换句话说，那应该是一个二维数组：外部数组的元素对应于行，其元素（内部数组）是图像数据。

使用您的问题中的代码，您实际上只在该变量中存储了一行 - 所有其他行基本上都被忽略了。将您的代码与此进行比较：

$a = [ [1], [2], [3] ], [ [4], [5], [6] ];
JSON.stringify($a); // "[[1],[2],[3]]"

请参阅comma运算符优先级低于=之一。所以表达式被处理为......

($a = [ [1], [2], [3] ]),
 [ [4], [5], [6] ];

...也就是说，分配操作仅针对第一个“行”进行。

使用简单嵌套数组的ng-repeat不能按预期运行

1 个答案: