javascript - ng-init 调用向 ng-repeat 提供数据的函数

Question

我正在尝试显示不同任务的评论。所有任务都列在一页上。评论应显示在每个任务下。

     <div class="panel-footer">
        <div class="comment_number">Comments : {{task["comments-count"]}}  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#commentBox{{task.id}}">[+]</button></div> 
        <div ng-init="findComments(task.id)" id="commentBox{{task.id}}" class="commentShow panel-body collapse">
            <ul>
                <li ng-repeat="comment in comments">
                    <div class="avatar"><img src="{{comment['author-avatar-url']}}"/> By {{comment["author-firstname"]}}</div>
                    <div class="commentContent">{{comment.body}}</div>
                </li>
            </ul>
        </div>
  </div>

正如你所看到的，我正在尝试 ng-init 一个调用任务 id 的函数。请注意，代码已经在另一个 ng-repeat 中，它使所有任务循环。

<li class="list-group-item" ng-repeat="task in myTaskfromList">
   ...... code above is actually here after task details..
</li>

问题是代码只显示第一个循环任务的评论列表和评论内容。它不会显示其他任务注释，而是用第一个任务注释覆盖第二个任务注释位置。

现在我尝试这样做

<li ng-init="findComments(task.id)" class="list-group-item" ng-repeat="task in myTaskfromList">

</li>

这没有显示任何内容..

这是我的 Controller

//get comments from task
$scope.findComments = function(taskId) {
  $http.get("http://abounde.com/portal/api/task/"+taskId).then(function(response) {
    $scope.comments = response.data.comments;
  });
}

您能给我建议有效的解决方案吗？

Answer 1

那么，您已经嵌套了 ng-repeat block ，并且每个 block 都发出自己的 xhr 请求？这听起来效率特别低。假设您可以控制正在使用的其余 API，如果您扩充 http://abounde.com/portal/api/task/，事情将会显着更快且更容易管理。获取任务 ID 列表，然后一次性遍历所有任务 ID。