json 嵌套 ng-repeat

Question

我在嵌套的 ng-repeat 中遇到问题。 $http.get 成功的数据 return 是 give

$scope.comment = data;

在$scope.comment中我有以下数据

[{
    "0": {
        "0": {
            "id": "5",
            "comment_body": "this comment is from facebook login",
            "user_name": "Shabir Ullah"
        },
        "id": "3",
        "comment_body": "this is first comment from twitter account",
        "user_name": "shabirullah518"
    },
    "id": "2",
    "comment_body": "first comment on another blog",
    "user_name": "Shabir Ullah"
},{
    "0": {
        "id": "8",
        "comment_body": "second comment on first article from google id",
        "user_name":    "Shabir Ullah"
    },
    "id": "6",
    "comment_body": "this is tuesday comment",
    "user_name": "Shabir Ullah"
},{
    "id": "7",
    "comment_body": "this comment is from google login id",
    "user_name": "Shabir Ullah"
}]

我尝试以下方法

ng-repeat = com in comment
{{com.user_name}}

ng-repeat = son in com.sons
{{son.user_name}}

ng-repeat = grandson in son.grandsons
{{grandson.user_name}}

只打印父不打印子孙

Answer 1

这是我的解决方案，这个答案是基于 JSON 提供的，仅此而已。

首先我们遍历对象列表。
然后我们需要什么就打印什么，基本上第二个ng-repeat就不需要了。如果你想要一个二级，我建议你改变接收对象的格式，如果你的二级和一级不同，就很难通用。

参考：generic recursive ng-repeat

注意：请忽略HTML中的text-indent进行格式化仅用于目的！

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

app.controller('MyController', function MyController($scope) {
  $scope.comment = [{
    "0": {
      "0": {
        "id": "5",
        "comment_body": "this comment is from facebook login",
        "user_name": "Shabir Ullah"
      },
      "id": "3",
      "comment_body": "this is first comment from twitter  account",
      "user_name": "shabirullah518"
    },
    "id": "2",
    "comment_body": "first comment on another blog",
    "user_name": "Shabir Ullah"
  }, {
    "0": {
      "id": "8",
      "comment_body": "second comment on first article from google id 2",
      "user_name": "Shabir Ullah"
    },
    "id": "6",
    "comment_body": "this is tuesday comment",
    "user_name": "Shabir Ullah"
  }, {
    "id": "7",
    "comment_body": "this comment is from google login id",
    "user_name": "Shabir Ullah"
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <div ng-repeat="x in comment">
    <div>
      {{x.user_name}}
    </div>
    <div style="text-indent: 50px;">
      {{x.comment_body}}
    </div>
    <br>
    <div style="text-indent: 100px;">
      <div>
        {{x['0'].user_name}}
      </div>
      <div style="text-indent: 150px;">
        {{x['0'].comment_body}}
      </div>
    </div>
    <br>
  </div>
</div>

json 嵌套 ng-repeat

nested ng-repeat on json

angularjs

angularjs-ng-repeat