角度范围和 ng-repeat答案

【问题标题】：Angular Scope and ng-repeat角度范围和 ng-repeat
【发布时间】：2014-03-02 18:16:59
【问题描述】：

简而言之我的问题

如何在控制器内部操作由 ng-repeat 创建的隔离范围？

要阅读我遇到的完整问题，请继续阅读以下内容：

我有一个关于时间线的集合，每个时间轴都有一个捕获集合（基本上是图像）。

HTML

<ul>
    <li ng-repeat="timeline in timelines | filter:search | orderBy:'event_date':sort">
        <ul ng-if="timeline.captures">
            <li ng-repeat="captures in timeline.captures | limitTo:imageLimit">
                <img ng-src="<% captures.capture_location %>">
            </li>
        </ul>
        <a ng-click="(imageLimit = imageLimit + 1)">Load more</a>
    </li>
</ul>

我想限制页面加载时加载的图像数量.. 我可以使用limitTo
我想在用户单击“加载更多”时加载更多图像。我也可以通过ng-click="(imageLimit = imageLimit + 1)

我想做什么：

我想把它作为一个函数提取出来

so that the following
<a href="#" ng-click="(imageLimit = imageLimit + 1)">Load more</a>
becomes 
<a href="#" ng-click="loadMore()">Load more</a>

为此，我尝试了以下方法：

在我的控制器内部

$scope.imageLimit = 1; // number of images to show initially on page load

$scope.loadMore = function() {
    $scope.imageLimit += 1;
};

现在发生的情况是，这不是在重复范围内创建 imageLimit 模型（如果您理解我的意思），而是在控制器范围内创建 imageLimit 模型。这也是预期的行为，但我想知道如何在控制器内的重复时间线（该时间线的隔离范围）内操作范围？

【问题讨论】：

标签： angularjs angularjs-scope

【解决方案1】：

如果我理解正确，您希望能够为每个时间线loadMore()，独立于其他时间线。 loadMore() 函数因此应该将时间线作为参数，并且限制应该是时间线的属性：

angular.forEach($scope.timelines, function(timeline) {
    timeline.imageLimit = 10; // default value
});

$scope.loadMore(timeline) {
    timeline.imageLimit++;
}

在你的模板中：

<li ng-repeat="captures in timeline.captures | limitTo:timeline.imageLimit">
...
<a ng-click="loadMore(timeline)">Load more</a>

【讨论】：

谢谢。工作完美.. 更重要的是我学会了如何解决这样的问题。