使用Angular Js将Json文件绑定到表中答案

【问题标题】：Binding Json file into Table using Angular Js使用Angular Js将Json文件绑定到表中
【发布时间】：2015-10-18 10:47:57
【问题描述】：

如何在 Json 下绑定 Place 和 Activity？我确实使用 table 解析 Event 和 AccountShop 并且它运行，我认为这是因为 Place 和 Activiy 中的分隔符？任何人都可以在这里提供帮助或有建议或建议将我从代码中删除。

table.htm

   <!DOCTYPE html>
<html ng-app="myTable">
<head>
    <title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script type="text/javascript">
    var myTable=angular.module('myTable',[]);
    myTable.controller('tableCtrl',function($scope,$http){
        $http.get("Table.json").success(function(response){
        $scope.members=response.events;


});

    });
</script>
<style type="text/css">
    table, th, td{
        border: 2px sol grey;
        border-collapse: collapse;
        padding: 4px;
        font-family: arial;

    }

    table tr:nth-child(odd){
        background-color:   #00BFFF;

    }
    table tr:nth-child(even){
        background-color: #808080;
    }

</style>


</head>




<body ng-controller="tableCtrl">
<table border="1">
    <tr>
    <th>Event</th>
    <th>Account Shop</th>
    <th>Place</th>
    <th>Activity</th>
    </tr>

        <tr ng-repeat="member in members">
        <td>{{member.Event.id}}<br>
        {{member.Event.account_id}}<br>
        {{member.Event.shop_id}}<br>


        <td ng-repeat="member in members">
        {{member.AccountShop.id}}<br>
        {{member.AccountShop.name}}<br>
        {{member.AccountShop.short_code}}<br>
        </td>

        <tr ng-repeat="member in members">
        {{member.Place.id}}
        {{member.Place.name}}
        {{member.Place.lk_country_code}}




</table>
</body>
</html>

Table.json

{
    "events": [
        {
            "Event": {
                "id": "59",
                "account_id": "12",
                "shop_id": "12",

            },
            "AccountShop": {
                "id": "1",
                "name": "Sample",
                "short_code": "SampleL"
            },
            "Places": [
                {
                    "id": "537",
                    "name": "Sample",
                    "lk_country_code": "MY"
                }
            ],
            "Activities": [
                {
                    "id": "4011",
                    "short_description": "Sample\r\n"
                },
                {
                    "id": "106",
                    "short_description": "Sample\r\n \r\n"
                },
                {
                    "id": "1027",
                    "short_description": "Sample\r\n"
                }
            ]
        }
    ]
}

【问题讨论】：

Parsing/binding JSon file into Table using Angular的可能重复

标签： angularjs json parsing binding html-table

【解决方案1】：

请寻找以下解决方案：不要重复 td，而是在 td 中重复一个 Div 标签或 Span 标签：在下面的示例中，我刚刚对 json 进行了硬编码，在您的情况下，json 将从服务中重新调整

http://jsfiddle.net/avaqppn0/1/

<table border="1">
    <tr>
        <th>Event</th>
        <th>Account Shop</th>
        <th>Place</th>
        <th>Activity</th>
    </tr>

    <tr ng-repeat="member in members">
        <td>{{member.Event.id}}<br>
            {{member.Event.account_id}}<br>
            {{member.Event.shop_id}}<br>


        <td>
            {{member.AccountShop.id}}<br>
            {{member.AccountShop.name}}<br>
            {{member.AccountShop.short_code}}<br>
        </td>

        <td >
            <div ng-repeat="Place in member.Places">
                {{Place.id}}
                {{Place.name}}
                {{Place.lk_country_code}}
            </div>
        </td>
        <td >
            <div ng-repeat="Activity in member.Activities">
                {{Activity.id}}
                {{Activity.short_description}}
            </div>

        </td>
    </tr> 
</table>

【讨论】：

如果它解决了你的问题，请接受作为答案..请点赞@Jerald
好的，怎么样？对不起，我是新来的。再次感谢@rahul，
@Jerald 点击勾选标记在我上面的答案附近，向上和向下箭头的正下方

【解决方案2】：

$scope.members=response.events[0];

<tr>
    <td ng-repeat="(key,value) in members.Event">
    {{value}} <br>
    </td>
</tr>
<tr>
     <td ng-repeat="(key,value) in members.AccountShop">
     {{value}} <br>
     </td>
</tr>
<tr ng-repeat="place in members.Places">
    <td >
    {{place.id}} <br>
    {{place.name}} <br>
    {{place.lk_country_code}} <br>
    </td>
</tr>
<tr ng-repeat="act members.Activities">
    <td >
    {{act.id}} <br>
    {{act.short_description}} <br>
    </td>
</tr>

【讨论】：

嗨，非常感谢您证明代码，但我尝试使用您的代码并且输出重复，例如 under 事件的值是 john，然后输出显示如下，John约翰·约翰·约翰·约翰·约翰·约翰·约翰·约翰·约翰·约翰，