Question

我有一个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页面中没有重复数据为什么？我可以添加任何过滤器来使用它来添加总价吗？

Answer 1

你可以这样做：

    <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链接，我可以根据需要提供更完整的答案。

快乐的编码！

Answer 2

您也可以这样做，首先根据您的需要压缩您的回复。如下所示

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

Answer 3

试试这个

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

Answer 4

要在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>

Answer 5

请在下面找到明确的答案 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;
    }
   }
}

如何在AngularJS中使用ng-repeat在html页面中显示JSON数据？

5 个答案: