json stringからAngularJS ng-repeat

私はプロジェクトからタスクを見つけようとしており、別のdivに表示しようとしています。json stringからAngularJS ng-repeat

次のjson文字列は、{{projects}}変数内にある私のデータソースです。

私はこの出力は、あなたがどのように私は適切にループのですか教えてくださいと何か

などのプロジェクト名を得ることができ

を以下

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

を試してみました

[{"_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}]}]

：タスクリスト：

プロジェクト名：タスクリスト：

出典

2016-08-17 Nurul Alam

は、 "値" 列内のタスクはありますか？ – Anthony

使用ng-repeatng-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-repeatがあなたのソリューションから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

json stringからAngularJS ng-repeat

答えて

関連する問題