Question

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

$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

1 个答案: