Question

如何将json响应映射到html页面中的表。

Angularjs控制器：

app.controller('tableController', function ($scope,$http)
            {
                $scope.customerTable = [];
                $scope.getTable = function ()
                {
                    $http.get('<%=request.getContextPath()%>/GetTable.do').success(function (data)
                    {
                        $scope.customerTable = data;
//                        console.log($scope.customerTable);
                    });
                };
            });

html代码：

 <div ng-controller="tableController">
                <!--<p>Click <a ng-click="getTable()">here</a> to load data.</p>-->
                <table>
                    <tr>
                        <th>Card Number</th>
                        <th>First Name</th>
                        <th>Opening Balance</th>
                        <th>Withdrawal</th>
                        <th>Deposit</th>
                        <th>Closing Balance</th>
                        <th>Tx Date</th>
                        <th>Usage_Type</th>
                    </tr>
                    <tr ng-repeat="data in customerTable ">
                        <td>{{data[0]}}</td>
                    </tr>
                </table>
                <br>
                <button class="form-control btn btn-success" type="submit" ng-click="getTable()">Load Table Data</button>
            </div>

响应位于一个包含键值对的数组中。我是否必须修改ng-repeat？

以下是json的回复：

[{"TXDATE":"1-Aug-14","FIRST_NAME":"MOSES","USAGE_TYPE":"HOTELS/MOTELS/RESORTS","WITHDRAWAL":"15200","DEPOSIT":"0","CARD_NUMBER":"AL98****66325","CLOSING_BAL":"-362764.96","OPENING_BALANCE":"0"}]

Answer 1

使用属性。它应该是：

<tr ng-repeat="data in customerTable ">
   <td>{{data.TXDATE}}</td> <!-- result: 1-Aug-14 -->
</tr>

等等。

Answer 2

是的，你必须修改它。

<tr ng-repeat="data in customerTable ">
    <td>{{data['CARD_NUMBER']}}</td>
    <td>{{data['TXDATE']}}</td>
    <td>{{data['OPENING_BALANCE']}}</td>
    ...
</tr>

Answer 3

您可以使用每个对象中的字段：

<tr ng-repeat="data in customerTable ">
     <th>{{data.FIRST_NAME}}</th>
     <th>{{data.CARD_NUMBER}}</th>
     ...
</tr>

也许你可以使用directive进行这种与表相关的迭代。

从json响应中获取键值对到角js

3 个答案: