Question

/*------Factory method---------*/
factory.getAllOrders = function() {
       var orders = [];
       for(var i=0, len=customers.length; i<len; i++){
           if(customers[i].orders) {
               for(var j=0,ordersLen=customers[i].orders.length; j<ordersLen; j++){
                   return customers[i].orders;
               }
           }

       }

   };
  return factory;


/*-----------All orders controller--------------*/


myApp.controller('AllOrdersController',['$scope','$routeParams','customersFactory', function($scope,$routeParams,customersFactory) {
   $scope.orders = null;
   $scope.ordersTotal = 0.0;
   $scope.totalType;

   function init() {
       $scope.orders = customersFactory.getAllOrders();
   }

   function getOrdersTotal(){
       var total = 0;
       for(var i=0,len=$scope.orders.length; i<len; i++) {
           total += $scope.orders[i].total;
       }
       $scope.ordersTotal = total;
       $scope.totalType = ($scope.ordersTotal > 100) ? 'success' :'danger';
   }

   init();



]);

   <!-- View -->
   <div class="container">
   <div class="row">
       <div class="col-md-4">
           <h2>Customers Orders</h2>
br/>
           Filte:<input class="form-control" type="text" ng-model="orderFilter.product" />
           <br/>
           <br/>
       </div>
   </div>
/div>


div class="container">
   <div class="row">
       <div class="col-md-12">
           <table class="table table-responsive">
                <tr>
                    <th>Product</th>
                    <th>Total</th>
                </tr>
                <tr ng-repeat="order in orders | filter:orderFilter | orderBy:'name'">
                    <td>{{order.product}}</td>
                    <td>{{order.total | currency}}</td>
                 </tr>
                 <tr>
                    <td>&nbsp;</td>
                    <td>{{ordersTotal | currency}}</td>
                 </tr>
           </table>
       </div>
   </div>
/div>

/*--------------JSON FIle-----------------*/
var customers = [
        id: "1",
        joined: "2000-12-2",
        name: "Wali",
        city: "Dubai",
        orderTotal: "9.0765",
        orders: [{
            id: "1",
            product: "protein",
            total: "11.987"
        }]
    },
    {
        id: "2",
        joined: "2004-12-2",
        name: "Ali",
        city: "London",
        orderTotal: "20.0765",
        orders: [{
            id: "2",
            product: "bcca",
            total: "2.3456"
        }, {
            id: "3",
            product: "baseball",
            total: "4.3456"
        }]
    }];

我制作了一个显示json文件所有订单的控制器，并通过工厂方法提供了所有订单的功能。我想打印从json文件解析数据的表并提供客户的所有订单，但它只显示第一个客户的订单，我想显示所有订单。

Answer 1

factory.getAllOrders = function() {
    var orders = [];
    for(var i=0, len=customers.length; i<len; i++){
        if (customers[i].orders) {
            for (var j=0,ordersLen=customers[i].orders.length; j<ordersLen; j++){
                orders.push(customers[i].orders);
            }
        }
    }
    return orders;
};
return factory;

Answer 2

您过早地返回数据。这条线

return customers[i].orders;

只有在工厂内部和外部循环的第一次传递（i = 0，j = 0）后，

才会将控制权返回给控制器，这就是为什么您只获得第一个客户的订单。相反，如果您想要所有客户的订单，您应该遍历客户并将其相应的订单推送到您声明的订单数组中。这是代码：

factory.getAllOrders = function() {
    var orders = [];
    for(var i=0, len=customers.length; i<len; i++){
        if (customers[i].orders) {
            ordersLen=customers[i].orders.length;
            for (var j=0; j<ordersLen; j++){
                orders.push(customers[i].orders[j]);
            }
        }
    }
    return orders;
};
return factory;

然而，这将返回一个对象数组，而ng-repeater会认为存在重复，因为表面上它们都是Object。在这种情况下，建议使用 track by 选项。以下是修改后的ng-repeater代码：

<table class="table table-responsive">
    <tr>
        <th>Product</th>
        <th>Total</th>
    </tr>
    <tr ng-repeat="order in orders | filter:orderFilter | orderBy:'name' track by $index">
        <td>@{{order.product}}</td>
        <td>@{{order.total | currency}}</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>@{{ordersTotal | currency}}</td>
    </tr>
</table>

希望这有帮助。

角度代码不显示所有订单

2 个答案: