Question

我有一个角度应用程序，它从json中读取，如下所示：

[{
        "category": {
            "id": 40, 
            "name": "Category 1", 
            "parent": {
                "id": 38, 
                "name": "Parent Category 1", 
                "parent": {
                    "id": 23, 
                    "name": "Parent name", 
                    "level": 1
                }, 
                "level": 2
            }, 
            "level": 3
        }, 
        "subcategory": {
            "course_name": "Category Name 1", 
            "title": "Category Title", 
        }
    },
    {
        "category": {
            "id": 40, 
            "name": "Category 1", 
            "parent": {
                "id": 38, 
                "name": "Parent Category 1", 
                "parent": {
                    "id": 23, 
                    "name": "Parent name", 
                    "level": 1
                }, 
                "level": 2
            }, 
            "level": 3
        }, 
        "subcategory": {
            "course_name": "Category Name 2", 
            "title": "Category Title", 
        }
    },
    {
    "category": {
        "id": 40, 
        "name": "Category 1", 
        "parent": {
            "id": 39, 
            "name": "Parent Category 2", 
            "parent": {
                "id": 23, 
                "name": "Parent name", 
                "level": 1
            }, 
            "level": 2
        }, 
        "level": 3
    }, 
    "subcategory": {
        "course_name": "Category Name 3", 
        "title": "Category Title", 
    }
}
]

我正在尝试阅读这个json并将其写在应用程序中，以使页面中的结构如下所示

Parent name
    Parent Category 1
        Category 1
            Category Name 1, Category Title
            Category name 2, Category Title
    Parent Category 2
        Category 1
            Category Name 3, Category Title

我怎样才能在角度上得到这个结构？这是我尝试过的plunker。

Answer 1

您需要先汇总数据。然后，您可以重复摘要以呈现父级别列表。然后，嵌套重复可以有条件地显示子数据。

摘要数组（使用简单循环生成，或者像lodash这样的花哨库）可能如下所示：

$scope.parents = [{
  "id": 23,
  "name": "Parent name",
  "level": 1
}]

$scope.parentCategories = [{
  "id": 38,
  "name": "Parent Category 1"
}, {
  "id": 39,
  "name": "Parent Category 2"
}]

$scope.categories = [{
  "id": 40,
  "name": "Category 1"
}]

然后你可以像这样使用它们：

<div ng-repeat="parent in parents">
  <ul>
    <li>{{parent.name}}
      <ul ng-repeat="parentcategory in parentCategories">
        <li>{{parentcategory.name}}
          <ul ng-repeat="category in categories">
            <li>{{category.name}}
              <ul ng-repeat="program in programs" 
                  ng-show="program.category.id == category.id">
                <li ng-show="program.category.parent.id == parentcategory.id">
                  {{program.subcategory.course_name}} {{program.subcategory.title}}
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

如果您想尝试代码here it is on Plunkr。

Angular app从嵌套的json结构中读取

1 个答案: