AngularJS吳重複從json字符串

我想從一個項目中找到任務，並在單獨的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>

此輸出以下

你能告訴我我如何得到正確的循環，並得到類似

項目名稱：任務列表：

項目名稱：任務清單：

項目名稱：任務列表：

來源

2016-08-17 Nurul Alam

是「值」數組中的任務是什麼？ – Anthony

使用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

來源

2016-08-17 16:24:28 Thalaivar

你打敗了我。 – Anthony

此嵌套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>

來源

2016-08-17 16:34:26

AngularJS吳重複從json字符串

回答

相關問題