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>

这并没有显示任何内容..

这是我的控制器

//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块，每个块都有自己的xhr请求吗？这听起来特别低效。假设您可以控制正在使用的其余API，那么如果您扩充http://abounde.com/portal/api/task/以获取任务ID列表然后一次遍历它们，事情将会更快更容易管理。< / p>

Answer 2

你真的不应该像这样使用ng-init，或者通常根本不使用RunMacro。请参阅the documentation中的警告。在页面加载时获取数据应该在控制器中完成，而不是模板。

ng-init调用函数，为ng-repeat提供数据

2 个答案: