来自json字符串的AngularJS ng-repeat答案

【问题标题】：AngularJS ng-repeat from json string来自json字符串的AngularJS ng-repeat
【发布时间】：2016-08-17 16:16:44
【问题描述】：

我正在尝试从项目中查找任务并将它们显示在单独的 div 中。

以下 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>

输出如下

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

项目名称：任务清单：

项目名称：任务列表：

项目名称：任务清单：

项目名称：任务列表：

【问题讨论】：

任务是否在“value”数组中？

标签： javascript angularjs loops

【解决方案1】：

在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

【讨论】：

你打败了我。

【解决方案2】：

这个嵌套的 ng-repeat 可以成为您的解决方案......

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

【讨论】：