Question

我有一个json如下。

{  
   "id":14,
   "discussion":8,
   "parent":0,
   "userid":2,
   "subject":"communication skill discussion 2",
   "message":"<p>hi all to communication discussion 2 </p>",
   "children":[  
      24,
      16,
      15
   ]
},
{  
   "id":15,
   "discussion":8,
   "parent":14,
   "userid":2,
   "subject":"Re: communication skill discussion 2",
   "message":"<p>hiiiiiiiiii</p>",
   "children":[  
      25,
      23
   ],
},
{  
   "id":23,
   "discussion":8,
   "parent":15,
   "userid":2,
   "created":1461562317,
   "modified":1461562317,
   "mailed":0,
   "subject":"Re: communication skill discussion 2",
   "message":"<p>helloooo</p>",
   "children":[  

   ],
}

我想首先获取其ID与子数组中的元素匹配的详细信息例如对于id：14有3个孩子24,16,15。然后控件应该直接转到id：15并获取id的详细信息：15.Again id有孩子，例如。考虑id：23，没有孩子，将直接打印消息。

请指导我如何使用角度的ng-repeat实现此目的？

Answer 1

请参阅Demo。

请找到以下代码：

<强> HTML：

<div ng-app="app" ng-controller="test">
  <div ng-repeat="(key,value) in data">
    {{key + 1}}) --
    <span ng-if="value.children.length > 0">
    {{value.children}}
    </span>
    <span ng-if="!(value.children.length > 0)">
    No children found!!
    </span>
  </div>
</div>

<强> JS：

var app = angular.module('app', []);

app.controller('test', function($scope) {
  $scope.data = [{
    "id": 14,
    "discussion": 8,
    "parent": 0,
    "userid": 2,
    "subject": "communication skill discussion 2",
    "message": "<p>hi all to communication discussion 2 </p>",
    "children": [
      24,
      16,
      15
    ]
  }, {
    "id": 15,
    "discussion": 8,
    "parent": 14,
    "userid": 2,
    "subject": "Re: communication skill discussion 2",
    "message": "<p>hiiiiiiiiii</p>",
    "children": [
      25,
      23
    ],
  }, {
    "id": 23,
    "discussion": 8,
    "parent": 15,
    "userid": 2,
    "created": 1461562317,
    "modified": 1461562317,
    "mailed": 0,
    "subject": "Re: communication skill discussion 2",
    "message": "<p>helloooo</p>",
    "children": [

    ],
  }];
});

更新： 根据请求

http://slick.typesafe.com/doc/3.0.0/schemas.html

<强> HTML：

<div ng-app="app" ng-controller="test">
  <div ng-repeat="(key,value) in data">
    [{{key + 1}}] --
    <div ng-if="value.children.length > 0">
      <div ng-repeat="item in value.children">
        <span>{{item}}</span> <span class="green" ng-bind-html="getMessage(item)"></span>
      </div>

    </div>
    <span ng-if="!(value.children.length > 0)">
    No children found!!
    </span>
    <br />
  </div>
</div>

<强> JS：

  $scope.getMessage = function(itemId) {
    var flag = true;
    var msg;
    angular.forEach($scope.data, function(value, key) {
      if (flag && value.id == itemId) {
        flag = false;
        msg = value.message;
      } 
    });
    return $sce.trustAsHtml(msg);
  }

<强> CSS：

.green {
  color: green;
}

Answer 2

使用 ng-repeat 显示记录。

<ul ng:controller="Cntl">
<li ng:repeat="item in data">
    {{item.subject}}: Parent
    <ul>
        <li ng:repeat="child in item.children">{{child}} : Children
        </li>
    </ul>
</li>

这是在html中显示的方式之一。根据您的网页设计， ng-repeat 会发生变化。

Answer 3

您可以使用lodash或下划线_.where：

<div ng:controller="Cntl">
  <div ng:repeat="item in data">
   {{item.subject}}<br/>
    Children
    <div ng:repeat="child in item.children">{{_.where(data, {id:child});}}
    </div>
 </div>

Answer 4

首先，您需要将json重组为树结构。可能你想看看这个post。然后你必须递归添加templates

使用AngularJS从基于唯一字段的嵌套JSON中获取信息

4 个答案: