Question

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

我有标签。我有帖子

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

我的目标：

列出所有代码并列出这些代码下方的所有特定帖子。

这里有一幅清晰的图片

Tag1中

Post1 Post2 Post3

与Tag2

Post4 Post1

TAG3

Post3

确定。现在，我在控制器中使用两个功能来完成这项工作。

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

在下文中，

  $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>

这是Plunker。我相信这就是你想要做的。如果不是，请告诉我。

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>

尚未对上述内容进行测试，但我认为看起来不错

Angularjs在控制器中完成每个for循环迭代时触发ng-repeat

4 个答案: