document.write a json vector to a table - html

Question

Firstly I get orders:
app.controller('customersController', ['$scope', '$http', function($scope,$http) {
$http.get("http://18ff2f50.tunnel.mobi/yii2-basic/tests/Customers_JSON.json")
.success(function (response)
{
console.log("debug",response);
$scope.orders = response;
});
In an order I have a detail:
<div class="row" ng-repeat="x in orders|orderBy:'order_id'">
....
<div class="col right">
<button ng-click="viewOrderDetails(x.detail)">订单详情</button>
</div>
I have a json vector (which is returned from the server) stored in "detail" like this:
"detail":
"{\"4\":
{\"num\":2,
\"id\":\"4\",
\"name\":\"\\u86cb\\u7092\\u996d\",
\"price\":\"10.00\",\"total\":20},
\"6\":
{\"num\":1,
\"id\":\"6\",
\"name\":\"\\u626c\\u5dde\\u7092\\u996d\",
\"price\":\"10.00\",\"total\":\"10.00\"},
\"5\":
{\"num\":1,
\"id\":\"5\",
\"name\":\"\\u51b0\\u6dc7\\u51cc\",
\"price\":\"8.00\",\"total\":\"8.00\"
}}"
$scope.viewOrderDetails = function viewOrderDetails(detail) {
var newWin = open('orderdetails.html','windowName','height=300,width=300');
newWin.document.write('html to write...\n');
newWin.document.write(detail);
newWin.document.write('<input type="button" value="Close this window" onclick="window.close()">');
}
I want it displayed in a new window like this:
how should I do the document.write? Thanks.

Answer 1

You can use $compile service to compile template to write into new window:
app.controller('customersController', function($scope, $http, $compile) {
$http.get("order.json").success(function(response) {
$scope.x = response;
});
$scope.viewOrderDetails = function viewOrderDetails(order) {
var newWin = open('', 'windowName', 'height=300,width=300');
var template =
'<div>' +
'<table>' +
'<tr ng-repeat="(key, value) in order">' +
'<td>{{value.name}}</td>' +
'<td>{{value.id}}</td>' +
'<td>{{value.price}}</td>' +
'<td>{{value.total}}</td>' +
'</tr>' +
'</table>' +
'<input type="button" value="Close this window" onclick="window.close()">' +
'</div>';
$scope.order = order;
var table = $compile(template)($scope);
newWin.document.body.appendChild(table[0]);
}
});
Demo: http://plnkr.co/edit/pMCClUYMkpeyMiFwphrj?p=preview

Answer 2

Please take a look the code below, If you don't want to use jQuery, and want to use document.write() way. Use this code in your orderdetails.html file
<table>
<thead>
<tr>
<th>ID</th><th>Name</th><th>Price</th><th>Total</th>
</tr>
</thead>
<tbody>
<script>
var detail = window.opener.detail;
for(key in detail) {
document.write("<tr><td>"+ detail[key]["num"] +"</td><td>"+ detail[key]["name"] +"</td><td>"+ detail[key]["price"] +"</td><td>"+ detail[key]["total"] +"</td></tr>");
}
</script>
</tbody>
</table>
Please let me know if it is not working.