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

时间:2015-06-27 20:13:59

标签: javascript angularjs twitter-bootstrap angularjs-ng-repeat

我有一个Angular应用程序,显示带有Bootstrap的3个项目列,为了达到这个目的,我使用以下代码将我的数据数据包装成3个组:

void handle_write(const boost::system::error_code& error, size_t bytes_transferred)
{
    if (!error)
    {
        size_t len = socket_.available();
        boost::asio::async_read(socket_,
                                boost::asio::buffer(reply_, len),
                                boost::bind(&SSLClient::handle_read, this,
                                            boost::asio::placeholders::error,
                                            boost::asio::placeholders::bytes_transferred));
    }
    else
    {
        std::cout << "Write failed: " << error.message() << "\n";
    }
}

然后在HTML中:

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;
        }
    };
});

到目前为止一切顺利,但是当我试图用<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> 设置我的路线时,它会像[0,1,2],[0,1,2]那样被包裹而不是[0,1,2],[3,4,5]。

关于如何实现这一目标的任何想法?

1 个答案:

答案 0 :(得分:1)

您父母的索引是[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