javascript - 避免在嵌套 ng-repeat 中进行索引包装以进行路由

Question

我有一个使用 Bootstrap 显示 3 个项目列的 Angular 应用程序，为了实现此目的，我使用以下代码将我的数据数组包装为 3 个组:

examples.success(function(data) { 
  $scope.examples = data; //[0, 1, 2, 3, 4, 5];
  $scope.examplesGrouped = $filter('groupBy')($scope.examples, 3);//[0, 1, 2], [3, 4, 5]
});

$filter = ('groupBy', function() {
    return function(items, groupItems) {
        if (items) {
            var newArray = [];

            for (var i = 0; i < items.length; i+=groupItems) {
                if (i + groupItems > items.length) {
                    newArray.push(items.slice(i));
                } else {
                    newArray.push(items.slice(i, i + groupItems));
                }
            }
            return newArray;
        }
    };
});

然后在 HTML 中:

<div class="row" ng-repeat = "examples in examplesGrouped">
    <div class="col-md-4 portfolio-item" ng-repeat="example in examples">
        <a ng-href="#/examples/{{ $parent.$index }}">
            <img class="img-responsive" src="http://placehold.it/700x400" alt="">
        </a>
    </div>
</div>

到目前为止一切都很好，但是当我尝试使用 $parent.$index 设置路线时，它会像 [0, 1, 2], [0, 1, 2] 那样包装[0, 1, 2], [3, 4, 5]。

关于如何实现这一目标有什么想法吗？

Answer 1

你 parent 的索引是[0,1]。
如果您希望链接如下:

<a ng-href="#/examples/0">
<a ng-href="#/examples/1">  
<a ng-href="#/examples/2">  
<a ng-href="#/examples/3">

等等，您必须将模板更改为:

<a ng-href="#/examples/{{ example }}"></a>

这是一个jsbin