如何使用Angular JS在HTML页面中呈现JSON数据

Question

I have a Json data like this

Object {Science: Array[3], Accounts: Array[3], History: Array[3], Mathematics: Array[3]}
Accounts: Array[3]
0: Object
1: Object
2: Object
length: 3
History: Array[3]
Mathematics: Array[3]
Science: Array[3]

Now to render this data in HTML page like this

<h1> Accounts</h1>
<div> Object </div>
<div> Object </div>
..................

Answer 1

You can use ng-repeat directive with JSON Data like this example:

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
  <p>Looping with ng-repeat:</p>
  <ul>
    <li data-ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Fiddle Demo With Array

And You can even show your nested objects using ng-repeat directive like this:

<ul ng:controller="Cntl">
    <li ng:repeat="item in data">
        {{item.name}} has children:
        <ul>
            <li ng:repeat="child in item.children">{{child.name}} has grant-children: 
                <ul><li ng:repeat="gch in child.children">{{gch.name}}</li></ul>
            </li>
        </ul>
    </li>
</ul>

 <script>
function Cntl() {
    this.data = [{
        name: '1',
        children: [{
            name: '11',
            children: [{
                name: '111'}, {
                name: '112'}]}, {
            name: '12',
            children: [{
                name: '121'}, {
                name: '122'}]}]}, {
        name: '2',
        children: [{
            name: '21'}, {
            name: '22'}]
     }];
}
</script>

Fiddle Demo With Nested Objets

Answer 2

Got my answer

 <div class="panel" ng-repeat="(subject, activities) in Activities">
        <h3 class="panel-title followMeBar">{{subject}}</h3>

        <div class="panel-body">
            <ul class="list-group">
                <div class="row list-group-item" ng-repeat="activity in activities">
                    <div class="col-xs-4">
                        <img class="scale-notebook-image" src={{activity.fileTypeImg}}>
                    </div>
                    <div class="col-xs-8">
                        <div>{{activity.fileTitle}}</div>
                        <div>by {{activity.createdBy}}</div>
                    </div>
                </div>
            </ul>
        </div>
    </div>