使用JSonfile在表中绑定新数组

时间:2015-07-28 07:24:25

标签: angularjs json parsing binding html-table

我想问一下如何在表EventShop,Place和Activity下面显示“totals array”?这段代码正在运行,但我确实无法在表格下方的Json中插入“total”值。

table.html

    <!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>

</head>
<body ng-controller="tableCtrl">
<table border="5">
    <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>
  <div ng-repeat="Place in member.Place">
      {{Place.id}}<br>
      {{Place.name}}<br>
      {{Place.lk_country_code}}<br>
      </div>
      </td>
 <td>
      <div ng-repeat="Activity in member.Activity">
      {{Activity.id}}<br>
      {{Activity.short_description}}
      </div>

      </td>
      </tr>

      <th>Total</th>

      <td>
      <div ng-repeat="total members.totals">

      {{totals.totals.page}}
      {{totals.current}}
      {{totals.count}}
      {{totals.prevPage}}
      {{totals.nextPage}}
           {{totals.pageCount}}
            {{totals.order}}
             {{totals.limit}}
              {{totals.options}}
               {{totals.paramType}}

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

Table.json

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

            },
            "AccountShop": {
                "id": "1",
                "name": "Gill Divers Pte Ltd",
                "short_code": "GILL"
            },
            "Place": [
                {
                    "id": "537",
                    "name": "Pulau Dayang",
                    "lk_country_code": "MY"
                }
            ],
            "Activity": [
                {
                    "id": "4011",
                    "short_description": "sample\r\n"
                },
                {
                    "id": "106",
                    "short_description": "sample\r\n \r\n"
                },
                {
                    "id": "1027",
                    "short_description": "sample\r\n"
                }
            ]
        }
    ],
    "totals": [],
    "paging": {
        "page": 1,
        "current": 50,
        "count": 3621,
        "prevPage": false,
        "nextPage": true,
        "pageCount": 73,
        "order": [],
        "limit": 50,
        "options": [],
        "paramType": "querystring"
    }
}

1 个答案:

答案 0 :(得分:0)

你错过了ng-repeat中的in。尝试:

<div ng-repeat="total in members.totals">

你的总数数组是空的:

"totals": []

但我认为你真正的问题是你试图访问错误的属性和正确的属性甚至不能在$scope.members上获得

myTable.controller('tableCtrl', function($scope, $http) {

  $http.get("Table.json").success(function(response) {
    debugger
    $scope.members = response.events;
    // you need the paging property which isn't in the events array
    $scope.totals = response.paging;

  });

});