2016-08-17 80 views
2

我想从一个项目中找到任务,并在单独的div中显示它们。AngularJS吴重复从json字符串

以下json字符串是我的数据源,它位于{{projects}}变量中。

[{"_id":"200566","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"713888","complete":false,"private":false,"position":3999,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null},{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":6,"id":"673437","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null}]},{"_id":"221840","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"800864","complete":false,"private":false,"position":3998,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null},{"name":"General tasks","pinned":true,"milestone-id":"","description":"","uncompleted-count":3,"id":"751194","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null}]},{"_id":"203859","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":3,"id":"690722","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"203859","projectName":"mphosipalityconsulting.com","DLM":null}]},{"_id":"207043","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":1,"id":"700757","complete":false,"private":false,"position":4000,"status":"new","projectId":"207043","projectName":"Gloucester B&B & Pub","DLM":null}]}] 

我已经试过

 {{projects}} 
     <li class="list-group-item" ng-repeat="p in projects"> 
      <div class="nm"> 
       {{p.value[$index].projectName}} 
      </div> 
      <div class="taskBtn"> 
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#taskList{{post.id}}">[+]</button> 
      </div> 
      <div id="taskList{{post.id}}" class="collapse"> 
       {{p.value[$index].name}} 

      </div>    
     </li> 

此输出以下

enter image description here

你能告诉我我如何得到正确的循环,并得到类似

项目名称: 任务列表:

项目名称: 任务列表:

项目名称: 任务清单:

项目名称: 任务列表:

+0

是 “值” 数组中的任务是什么? – Anthony

回答

2

使用ng-repeat内的ng-repeat

DOM

<!DOCTYPE html> 
<html ng-app="App"> 

    <head lang="en"> 
    <meta charset="utf-8"> 
    <title>Custom Plunker</title> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css"> 
    </head> 

    <body ng-controller="Proj"> 
    <ul ng-repeat="p in projects">  
     <ul> 
     <li ng-repeat="item in p.value"> 
       {{item.name}} 
     </li> 
     </ul> 
    </ul> 
    </body> 

</html> 

控制器代码:

angular.module('App', []).controller('Proj', function ($scope) { 
    $scope.projects = [{"_id":"200566","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"713888","complete":false,"private":false,"position":3999,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null},{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":6,"id":"673437","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"200566","projectName":"fastfy.com","DLM":null}]},{"_id":"221840","value":[{"name":"Inbox","pinned":false,"milestone-id":"","description":"","uncompleted-count":0,"id":"800864","complete":false,"private":false,"position":3998,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null},{"name":"General tasks","pinned":true,"milestone-id":"","description":"","uncompleted-count":3,"id":"751194","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"221840","projectName":"The Crown","DLM":null}]},{"_id":"203859","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":3,"id":"690722","complete":false,"private":false,"position":4000,"status":"reopened","projectId":"203859","projectName":"mphosipalityconsulting.com","DLM":null}]},{"_id":"207043","value":[{"name":"General tasks","pinned":false,"milestone-id":"","description":"","uncompleted-count":1,"id":"700757","complete":false,"private":false,"position":4000,"status":"new","projectId":"207043","projectName":"Gloucester B&B & Pub","DLM":null}]}];; 
}); 

http://plnkr.co/edit/4RaxuzA3YXRIG8LvPwlr?p=preview

+1

你打败了我。 – Anthony

0

此嵌套NG-重复,可以B您的解决方案...

<li class="list-group-item" ng-repeat="p in projects"> 
     <div class="nm"> 
      {{p.value[$index].projectName}}: 
     <ul ng-repeat="t in p.value"> 
     <li>{{t.name}}</li> 
     </ul> 
     </div> 
     <div class="taskBtn"> 
     <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#taskList{{post.id}}">[+]</button> 
     </div> 
     <div id="taskList{{post.id}}" class="collapse"> 
      {{p.value[$index].name}} 

     </div>    
    </li>