我有一个JSON数据如何使用ng-repeat显示这些数据？ 我是angularJS的新手。我不知道如何在angularJS中重复嵌套在ng-repeat中 这是我的JSON数据。请帮我显示输出？
如何使用ng-repeat
获取这些数据customerId=56b6f841d085980f2241909c
name: Maxxwell
Total Product=2
Total Price=685 //(2*18.5)+240(3*(240*10/100))
createdOn: 07-Feb-2016 10:50:05 UTC
etc....
请参阅$ scope.orders是一个数组 我打电话给api并得到这个数据
orderPromise.success(function(data, status, headers, config)
{
$scope.orders=
[
{
"customerId": "56b6f841d085980f2241909c",
"address": {
"name": "Maxxwell",
"city": "Texas",
"country": "USA",
},
"products": [
{
"productId": "569df8bcd08598371e9b5ad9",
"quantity": 2,
"productDetails": {
"itemId": "569df86dd08598371e9b5ad8",
"actualPrice": "18.5",
"offer": 0,
"modifiedOn": "19-Jan-2016 12:35:32 UTC"
}
},
{
"productId": "569f2d2dd085980ecfc8997b",
"quantity": 3,
"productDetails": {
"itemId": "569f294dd085980ecfc89971",
"actualPrice": "240",
"offer": 10,
"modifiedOn": "06-Feb-2016 09:09:46 UTC"
}
}
],
"createdOn": "07-Feb-2016 10:50:05 UTC"
}
]
});
我需要在html页面中使用ng-repeat显示此输出
customerId=56b6f841d085980f2241909c
name: Maxxwell
Total Product=2
Total Price=685 //(2*18.5)+240(3*(240*10/100))
createdOn: 07-Feb-2016 10:50:05 UTC
:
:
我不知道它的正确与否，但它在我的html页面中无效 如果错了请纠正我？
$scope.ordertemp=[];
$scope.orderval={};
var countval = $scope.orders.length;
for(var j=0;j<countval;j++)
{
$scope.orderval.buyerId = $scope.orders[j].customerId;
$scope.orderval.name = $scope.orders[j].address.name
$scope.orderval.totalitem = $scope.orders[j].products.length
var count = $scope.orders[j].products.length
var total = 0;
var save=0;
for(var i=0;i<count;i++)
{
var actualprice = 0;
var offer = 0;
var price = 0;
var quantity=0;
actualprice = $scope.orders[j].products[i].productDetails.actualPrice;
offer = $scope.orders[j].products[i].productDetails.offer;
quantity = $scope.orders[0].products[i].quantity;
price = actualprice - (actualprice * offer)/100
total = total + (price * quantity);
save = save +((actualprice/100)*offer)* quantity
}
}
$scope.orderval.totalprice = total;
$scope.orderval.save = save;
$scope.ordertemp.push($scope.orderval);
alert(JSON.stringify($scope.ordertemp));
当我发出警报时，会显示此数据，但在我的ui页面中没有重复数据为什么？ 我可以添加任何过滤器来使用它来添加总价吗？
答案 0 :(得分：0)
你可以这样做：
<div ng-repeat="order in orders">
<div>
customerId={{order.customerId}}
</div>
<div>
name:{{order.address.name}}
</div>
<div>
Total product={{order.products.length}}
</div>
</div>
您需要一个功能或手表才能获得您的产品总数。 如果你给我一个带有工作样本的Plnkr或Jsfiddle链接，我可以根据需要提供更完整的答案。
快乐的编码！
答案 1 :(得分：0)
您也可以这样做，首先根据您的需要压缩您的回复。如下所示
$scope.orders=
[
{
"customerId": "56b6f841d085980f2241909c",
"address": {
"name": "Maxxwell",
"city": "Texas",
"country": "USA",
},
"products": [
{
"productId": "569df8bcd08598371e9b5ad9",
"quantity": 2,
"productDetails": {
"itemId": "569df86dd08598371e9b5ad8",
"actualPrice": "18.5",
"offer": 0,
"modifiedOn": "19-Jan-2016 12:35:32 UTC"
}
},
{
"productId": "569f2d2dd085980ecfc8997b",
"quantity": 3,
"productDetails": {
"itemId": "569f294dd085980ecfc89971",
"actualPrice": "240",
"offer": 10,
"modifiedOn": "06-Feb-2016 09:09:46 UTC"
}
}
],
"createdOn": "07-Feb-2016 10:50:05 UTC"
}
]
现在用于压缩响应的代码
var myFinalArr = [];
for (index in $scope.orders) {
var obj = {};
var productSum = 0;
obj.customerId = $scope.orders[index].customerId;
obj.name = $scope.orders[index].address.name;
obj.city = $scope.orders[index].address.city;
obj.country = $scope.orders[index].address.country;
obj.createdOn = $scope.orders[index].createdOn;
obj.productCount = $scope.orders[index].products.length;
for (index2 in $scope.orders[index].products) {
productSum = parseFloat(productSum) + parseFloat($scope.orders[index].products[index2].productDetails.actualPrice);
if (index2 == ($scope.orders[index].products.length) - 1) {
obj.productSum = productSum;
}
}
myFinalArr.push(obj);
}
console.log(myFinalArr);// your final Arr
$scope.orders = myFinalArr;
})
在视图中使用此
<div ng-repeat = "orderData in orders">
<div>CustomerId : {{orderData.customerId}}</div>
<div>Name : {{orderData.name}}</div>
<div>Total Product : {{orderData.productCount}}</div>
<div>Total Price : {{orderData.productSum}}</div>
<div>CreatedOn : {{orderData.createdOn}}</div>
</div>
答案 2 :(得分：0)
试试这个
<div ng-repeat="(key, value) in orders">
<p>{{value.customerId}}</p>
<p>{{value.createdOn}}</p>
<p>{{value.address.name}}</p>
<div ng-repeat="(key, provalues) in value.products">
<p>{{provalues.quantity}}</p>
<p>{{provalues.productDetails.actualPrice}}</p>
</div>
</div>
答案 3 :(得分：0)
要在html中显示json数据，请将json过滤器添加到表达式
<div ng-repeat="order in revoluza = (orders | json)">
<div>
customerId={{order.customerId}}
</div>
<div>
name:{{order.address.name}}
</div>
<div>
Total product={{order.products.length}}
</div>
</div>
答案 4 :(得分：0)
请在下面找到明确的答案 html部分
<div ng-repeat="(key,value) in accounttypes">
<ul><li ng-repeat="account in value.services">{{account.types}}</li></ul>
</div>
js part
bankservice.findByaccounttype($scope.selectedservice).then(function(results)
{
$scope.accounttypes = results;
});
function bankservice($q)
{
var accountservice=[{"id":"1","title":"Savings Account","services":[{"types":"ATM card request"},{"types":"loan request"}]},
{"id":"2","title":"Current Account","services":[{"types":"cheque book request"},{"types":"ATM card request"}]},
{"id":"3","title":"Demat Account","services":[{"types":"loan request"},{"types":"ATM card request"}]}];
return {
findAll: function() {
var deferred = $q.defer();
deferred.resolve(accountservice);
return deferred.promise;
},
findByaccounttype: function (selectedservice) {
var deferred = $q.defer();
var results = accountservice.filter(function (element) {return selectedservice === element.title;
});
deferred.resolve(results);
return deferred.promise;
}
}
}