如何在angularjs中使用ng-repeat来显示json数据

时间:2016-03-12 04:44:56

标签: javascript jquery angularjs json multidimensional-array

如何使用angularjs中的ng-repeat显示json数据

这是我的json -

$scope.data = [{
        "name": "PR",
        "roles": [{
            "name": "RPR1",
            "responsibilities": [{
                "processes": [{
                    "processName": "process 1"
                }, {
                    "processName": "process 2"
                }],
                "responsibilityName": "Resp1"
            }, {
                "processes": null,
                "responsibilityName": "Resp2"
            }]
        }, {
            "name": "RPR2",
            "responsibilities": [{
                "processes": null,
                "responsibilityName": "Resp1"
            }, {
                "processes": null,
                "responsibilityName": "Resp2"
            }]
        }]
    }, {
        "name": "Finance",
        "roles": [{
            "name": "RFinance1",
            "responsibilities": [{
                "processes": null,
                "responsibilityName": "Fresp1"
            }, {
                "processes": null,
                "responsibilityName": "Fresp2"
            }]
        }, {
            "name": "RFinance2",
            "responsibilities": [{
                "processes": null,
                "responsibilityName": "RespF1"
            }, {
                "processes": null,
                "responsibilityName": "RespF2"
            }]
        }]
    }, {
        "name": "IT",
        "roles": [{
            "name": "R1",
            "responsibilities": [{
                "processes": null,
                "responsibilityName": "Resp1"
            }, {
                "processes": null,
                "responsibilityName": "Resp2"
            }]
        }, {
            "name": "RIT2",
            "responsibilities": [{
                "processes": null,
                "responsibilityName": "Resp1"
            }, {
                "processes": null,
                "responsibilityName": "Resp2"
            }]
        }]
    }, {
        "name": "",
        "roles": []

    }];

这是我显示json数据的html代码 -

 <div class="container" ng-repeat="departments in data">

  <div class="row" ng-repeat="roles in departments.roles" >

    <div  class="col-sm-12 center"  >
        <div class="col-sm-3" ng-repeat="responsibilities in roles.responsibilities"> 
            <div class="col-xs-10 col-sm-12 box  "></br>
                <div class="strike form-group" >
                    <span >{{responsibilities.responsibilityName}}</span>
                </div>
            </div>
            <div class="col-xs-10 col-sm-12 box" style="padding-right: 0px ! important;"></br>
                <div class="form-group content1 mCustomScrollbar" >
                    <div class="panel panel-default" ng-repeat="processes in responsibilities.processes" >
                        {{processes.processName}}
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.blog-main -->

  </div><!-- /.row -->

</div>

我想重复div class =&#34; col-sm-3&#34;为每个责任 给我一些建议......

0 个答案:

没有答案