Привязка файла Json к таблице с помощью Angular Js

0

Как я могу связать место и активность под Json? Я разбираю 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"
                }
            ]
        }
    ]
}
Теги:
html-table
binding
parsing

2 ответа

0
Лучший ответ

Пожалуйста, найдите ниже решение: не повторяйте td, вместо этого повторяйте тег Div или тег Span внутри td: ниже. Пример. Я только что закодировал 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>
  • 0
    Пожалуйста, примите в качестве ответа, если это решит вашу проблему .. пожалуйста upvote @Jerald
  • 0
    хорошо, как это было? извините, я новичок здесь. еще раз спасибо @rahul,
Показать ещё 2 комментария
0

$ 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>
  • 0
    привет, большое спасибо за проверку кода, но я пытаюсь использовать ваш код, и вывод повторяется, как, например, значение события ниже - Джон, затем вывод выглядит так: Джон Джон Джон Джон Джон Джон Джон Джон Джон Джон Джон Джон Джон,

Ещё вопросы

Сообщество Overcoder
Наверх
Меню