AngularJS在控制器中完成的每个for循环迭代上触发ng-repeat

Question

我不知道如何以一种更容易理解的方式编写标题。 所以，请忍受我。

我有标签。 我有帖子

每个帖子都有2或3个或更多相关标签。

我的目标：

列出所有标签并在这些标签下列出所有特定帖子。

---

这是一张清晰的图片

标签1

Post1 Post2 Post3

标签2

Post4 Post1

标签3

帖子3

好。 现在，我在控制器中使用两个函数来完成这项工作。

一种是获取标签列表，另一种是获取每个标签的帖子。

此后，

  $scope.tags = null;
  $scope.tagPosts = null;     

 var getTags = function(callback){

   $http.get('/tags').success(function(result){

    $scope.tags = result;
    callback();


  }).error(function(e){
     console.log(e);
  });


 };




var getPostsByTags = function(){

    for(var i = 0; i < $scope.tags.length; i++){
      var currentTag = $scope.tags[i];
      $http.get('/posts/tag/' + currentTag.name).success(function(result){

      $scope.tagPosts = result;
       // Printing all the posts correctly
      console.log($scope.tagPosts); 

    }).error(function(e){

        console.log(e);

      });
   }

}

getTags(function(){
    getPostsByTags();
 });

并认为

 <div class="single-list" style="padding-bottom: 10px;" ng-repeat="tag in tags">
    <h3 style="border-bottom: 3px solid #e2e2e2; padding-bottom:10px;"><a href="#">{{  tag.name }} ( {{ tag.used }} )</a></h3>
    <div>
        <ul class="list-group">
          <li class="list-group-item" ng-repeat="post in tagPosts">
            <span>
              <a href="#">{{ post.title }}</a>
            </span>
            <span class="pull-right">{{ post.date }}</span>

          </li>
        </ul>
    </div>

 </div>

因此，我先打印所有标签，然后再打印与每个标签相关的帖子。 在这里，我已经使用了ngRepeat两次。 问题在于，它只是按照正确的顺序整理出所有帖子，而只在每个标签下打印数据库中的最后一个帖子，而不是其余标签。

这是因为，在$scope.tagPosts它将结果替换为新结果，直到最后一次迭代，其中只有一个帖子与最后一个标记相关联

那么，是否有可能在每次for循环完成后触发第二个ng-repeat？ 还是可以使用$scope.tagPosts或其他任何技巧来做些什么？

希望我能解决这个问题。

Answer 1

我相信您的问题出在将结果分配给$scope.tagPosts 。 这就是为什么要在数组中附加未直接分配的新结果的原因。

尝试这个：

$scope.tagPosts = [];  // at the beginning of controller

....

$scope.tagPosts.push(result);  // inside your for loop

更新

从结果来看，好像tagPosts是一个数组数组！ 这就是为什么您需要执行另一个ng-repeat ：

<li class="list-group-item" ng-repeat="post_arr in tagPosts">
    <span ng-repeat="post in post_arr">
        <span>
          <a href="#">{{ post.title }}</a>
        </span>
        <span class="pull-right">{{ post.date }}</span>
    </span>
</li>

Answer 2

试试这个：（1）在您的控制器中应该是

var getPostsByTags = function(){
    for(var i = 0; i < $scope.tags.length; i++){
      var currentTag = $scope.tags[i];
      $http.get('/posts/tag/' + currentTag.name).success(function(result){

      currentTag.tagPosts = result;
       // Printing all the posts correctly
      console.log($scope.tagPosts); 
    }).error(function(e){
        console.log(e);
      });
   }
}

（2）在视图中，更换

 <div class="single-list" style="padding-bottom: 10px;" ng-repeat="tag in tags">
    <h3 style="border-bottom: 3px solid #e2e2e2; padding-bottom:10px;"><a href="#">{{  tag.name }} ( {{ tag.used }} )</a></h3>
    <div>
        <ul class="list-group">
          <li class="list-group-item" ng-repeat="post in tag.tagPosts">
            <span>
              <a href="#">{{ post.title }}</a>
            </span>
            <span class="pull-right">{{ post.date }}</span>

          </li>
        </ul>
    </div>

 </div>

我认为这里的问题是内部ng-repeat循环遍历变量$ scope.tagPosts，该变量由从后端获取帖子的每个ajax调用进行更新。 因此，在所有ajax调用完成之后，此变量将更新为带有最后一个标签的帖子的值，因此您只能在标签数组中看到带有最后一个标签的帖子。

Answer 3

您可以使用以下过滤器来做到这一点：

在您的js中：

      $scope.postsToFilter = function(){
    indexedPosts = [];
    return $scope.posts;
  }
  $scope.filterPosts =function(post){
    var postIsNew = indexedPosts.indexOf(post.tagname) == -1;
    if(postIsNew){
      indexedPosts.push(post.tagname)
    }
    return postIsNew;
  } 

在您的HTML中：

    <div ng-repeat="t in postsToFilter() | filter:filterPosts">
 <h1>{{t.tagname}}</h1> 
  <div ng-repeat="p in posts | filter:{tagname: t.tagname} : true">
    {{p.name}}
  </div>
</div>

这是一个柱塞 。 我相信这就是您想要做的。 让我知道是否不是。

Answer 4

我相信数组可以解决您的问题，其中每个元素的类型为{tag：TagObject，posts：PostObject []}。例如：

$scope.data =[]
 var getTags = function(callback){
   $http.get('/tags').success(function(result){
    $scope.tags = result;
    callback();
  }).error(function(e){
     console.log(e);
  });
var getPostsByTags = function(){
    for(var i = 0; i < $scope.tags.length; i++){
      var currentTag = $scope.tags[i];
      $http.get('/posts/tag/' + currentTag.name).success(function(result){
      $scope.data.push({tag:currentTag,posts:result});
       // Printing all the posts correctly
      console.log($scope.tagPosts); 
    }).error(function(e){
        console.log(e);
      });
   }

并在您的html中：

 <div class="single-list" style="padding-bottom: 10px;" ng-repeat="tag in data">
    <h3 style="border-bottom: 3px solid #e2e2e2; padding-bottom:10px;"><a href="#">{{  tag.tag.name }} ( {{ tag.tag.used }} )</a></h3>
    <div>
        <ul class="list-group">
          <li class="list-group-item" ng-repeat="post in tag.posts">
            <span>
              <a href="#">{{ post.title }}</a>
            </span>
            <span class="pull-right">{{ post.date }}</span>
          </li>
        </ul>
    </div>
 </div>

尚未测试以上内容，但我认为它还可以