AngularJs - вложенный ng-repeat - PullRequest
Новая
       13

AngularJs - вложенный ng-repeat

0 голосов
/ 19 сентября 2018

Я пытаюсь перебрать данный JSONObject, который содержит JSONArray и отобразить его в формате html.Итак, вот пример:

jsonData: 

{
    "category1": [
        {
            "name": "Some title",
            "desc": "And its description"
        },
        {
            "name": "Another title here",
            "desc": "Also description here"
        }
    ],
    "category2": [
        {
            "name": "Dummy name",
            "desc": "Lorem ipsum etc."
        }
    ],
    "category3": [
        {
            "name": "Blah",  
            "desc": "Blah blah"
        }
    ]
}

Html: 

<div ng-repeat="category in vm.jsonData track by $index">
    <h3>{{ category }}</h3>
    <ul>
        <li ng-repeat="item in category">
            <span><b>{{ item.name }}</b></span><br/>
            <span>{{ item.desc }}</span>
        </li>
    </ul>
</div>

Пока ямогу получить name и desc правильно, но я пропускаю category в html.Любая помощь будет оценена.

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Вам нужно ng-repeat как <div ng-repeat="(key, value) in vm.jsonData track by $index">

DEMO 

var app = angular.module('testApp',[]);
app.controller('testCtrl',function(){
  this.jsonData = {
    "category1": [
        {
            "name": "Some title",
            "desc": "And its description"
        },
        {
            "name": "Another title here",
            "desc": "Also description here"
        }
    ],
    "category2": [
        {
            "name": "Dummy name",
            "desc": "Lorem ipsum etc."
        }
    ],
    "category3": [
        {
            "name": "Blah",  
            "desc": "Blah blah"
        }
    ]
};

 vm = this;

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl as vm">
<div ng-repeat="(key, value) in vm.jsonData track by $index">       
    <ul>    
     {{key}} 
        <li ng-repeat="item in value">
            <span>{{ item.name }}</span>
            <span>{{ item.desc }}</span>
        </li>
    </ul>
</div>
</body>
0 голосов
/ 19 сентября 2018

Вам необходимо получить доступ к ключу элемента, который в вашем случае является "category1".

Вы можете сделать это, используя этот синтаксис 

ng-repeat="(key, value) in data"

здесь работает jsfiffle дляваш пример

...