Question

我在控制器中有json数据作为响应。我必须在html中打印这些数据。

为此我做了如下：

在我的控制器中

.controller('DataImportControl', ['$scope','$http', '$location', '$rootScope' , function($scope, $http, $location, $rootScope) {

    console.log(" In dataimportCtrl");

        $scope.readCustomer = function(){

            console.log("in read customer");

            $http.post('/custimport').success(function(response) {


                console.log("in controller");
                console.log("controller:"+response);

                $scope.data=response; 

            }).error(function(response) {

             console.error("error in posting");

            });
        };
}])

我的HTML代码：

<html>
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="DataImportControl">
<form ng-submit="readCustomer()">

    <button type="submit" >Submit</button>
    </form>
<table class="table">
    <thead>
  <tr>
<th>Code exists in customer master</th>
  </tr>
    </thead>
<tbody>
<tr ng-repeat="cust in data ">
    <td>{{cust.customer_code}}</td>

</tr>
</tbody>
</table>

</div>
<div >
</div>

</body>

</html>

我的json数据作为控制器中的响应：

{"jarray":[{"customer_name":["Ankita"],"customer_code":["c501"]}]}

我的问题是如何在我的情况下使用ng-repeat在html中打印json数据？

提前致谢...

Answer 1

我假设您要打印出实际的对象，在这种情况下只需执行

将其包裹在预标签中以使其美化。

Answer 2

从您的服务返回的数据格式奇怪。我假设你有多个记录被退回，但你只是在这个例子中显示一个。

您在此处显示的记录是一个对象，其中一个数组作为属性之一。目前尚不清楚您的对象是否有多个数组，或者此数组是否嵌入了多个客户对象。但是，我编写了一个快速的plunker来展示如何在两种情况下进行迭代。

首先，如果您打算直接遍历data，并且data将包含多个数组，那么您将使用(key, value)语法，因为data本身就是一个对象而不是数组。

<div ng-repeat="(key, value) in data">
  key: {{key}}
  <br/>value: {{value}}
  <div ng-repeat="customer in value">
    Customer name: {{customer.customer_name}}
    <br/>Customer code: {{customer.customer_code}}
  </div>
</div>

但是，如果您的数据仅返回单个对象属性jarray，并且您将始终迭代此同一属性，则外部ng-repeat是不必要的：

<div ng-repeat="customer in data.jarray">
  Customer name: {{customer.customer_name}}
  <br/>Customer code: {{customer.customer_code}}
</div>

您可能希望以角度或服务器清理服务，并将jarray全部删除，如果它对数据没有特定意义的话。

http://plnkr.co/edit/Nq5Bo18Pdj4yLQ13hnrJ?p=preview

如何使用ng-repeat angularjs在html中打印数据

2 个答案: