Question

我想使用ngTable在Angular中检索HTML页面中的json数据。这就是我实现服务和控制器的方式：

 angular.module('detail', ['ui.router', 'ngTable', 'ngResource'])
   .config(function ($stateProvider) {
      $stateProvider
      .state('stats.orderdetails', {
      url: '/orderdetails',
      templateUrl: 'order/details/details.html',
      controller: 'OrderDetailsCtrl as orderDetails'
   });
   })
      .service('orderDetailsService', function ($http, $log, configuration) {

  this.find = function (startDate, endDate) {
   return $http.get(configuration.apiEndpoint + '/orderdetails',  {params:      {startDate: startDate, endDate: endDate}})
        .success(function (res) {
         $log.debug('Getting order summary startDate=<' + startDate + '>         endDate=<' + endDate + '>');
      return res;
      console.log(res);
       })
    .error(function (res) {
      $log.error('Connection error while getting order details');
      if (res !== null && res.message === 'Invalid date format') {
       throw {error: res.exception, message: 'Format de date invalide.',    showSummary: true};
       } else {
       throw {error: 'API_REST_NOT_AVAILABLE', message: 'Une erreur est    survenue.', showSummary: false};
     }
   });
 };

})
 .controller('OrderDetailsCtrl', OrderDetailsCtrl);
 function OrderDetailsCtrl(orderDetailsService, $filter, NgTableParams,     $scope) {
 var orderDetails = this;
  var data = [];

   orderDetails.getSummary = function (startdate, endate) {
    orderDetailsService.find(startdate, endate)
    .then(function(res) {
     orderDetails.summary = res.data;
      data = orderDetails.summary;
});
  };


   $scope.$on('filtering', function (event, filter) {
   orderDetails.getSummary(filter.startdate, filter.enddate);
   });

  orderDetails.statusList=[{id: '', title: 'Tout'}, {id: 'Expirée', title: 'Expirée'}, {id: 'Encaissée', title: 'Encaissée'}];

    orderDetails.tableParams = new NgTableParams({
    page: 1,  // show first page
    count: 5, // count per page
    filter: {orderStatus:''},
     sorting: {orderNumber: 'asc'} // initial sorting
   }, {
    total: data.length, // length of data
    counts:[5,10,15,20],// hide page counts control
     getData: function($defer, params) {
  // use build-in angular filter
      var filteredData = params.filter() ?
      $filter('filter')(data, params.filter()) :
      data;
      var orderedData = params.sorting() ?
       $filter('orderBy')(filteredData, params.orderBy()) :
       data;
        params.total(orderedData.length);
       $defer.resolve(orderedData.slice((params.page() - 1) *     params.count(), params.page() * params.count()));
}
   });

    orderDetails.countPerPage = 1;
 }

json数据如下：

   [{"orderNumber":"040778","restaurantReference":"465","customerReference":"417644408646330","totalAmount"
     :490,"orderStatus":               {"frontLabel":"Encaissée","daoField":"CASHED_IN"},"orderDate":"07/03/2013 00:00:00"
     ,"withdrawalPoint":       {"frontLabel":"","daoField":"N/A"},"paymentType":       {"frontLabel":"PayPal","daoField"
    :"PAYPAL"},"offerType":{"frontLabel":"Pas     d'offre","daoField":"N/A"},"offerReference":""},{"orderNumber"
         :"979722","restaurantReference":"465","customerReference":"2214531549088301","totalAmount":120,"orderStatus": {"frontLabel":   "Expirée", "daoField":"EXPIRED"},"orderDate":"07/03/2013 00:00:00","withdrawalPoint":{"frontLabel" 
                                  :"","daoField":"N/A"},"paymentType":     {"frontLabel":"PayPal","daoField":"PAYPAL"},"offerType":{"frontLabel"
          :"Pas d'offre","daoField":"N/A"},"offerReference":""}]

HTML页面中的代码如下：

     <div class="row">
       <h4 class="text-center">Rechercher des commandes (Du {{         filters.startdate | date:'dd-MM-yyyy'}} au {{filters.enddate |
          date:'dd-MM-yyyy' }})
       </h4>
      </script>
       <table ng-table="orderDetails.tableParams" class="table table-hover" show-filter="true" >
     <tr ng-repeat="order in $data">
  <td  data-title="'Numéro commande'" sortable= "'orderNumber'" >
    {{order.orderNumber}}
  </td>
  <td data-title="'Ref restaurant'" sortable="'restaurantReference'">
    {{order.restaurantReference}}
  </td>
  <td data-title="'Ref client'" sortable="'customerReference'">
    {{order.customerReference}}
  </td>
  <td  data-title="'Montant total'" sortable="'totalAmount'">
    {{order.totalAmount | currency }}
  </td>
  <td data-title="'statut'" sortable="'orderStatus'" filter="{'orderStatus.frontLabel':'select'}" filter-data="orderDetails.statusList">
    {{order.orderStatus.frontLabel}}
  </td>
  <td data-title="'Date commande'" sortable="'orderDate'">
    {{order.orderDate}}
  </td>
  <td data-title="'Point de retrait'" sortable="'withdrawalPoint.frontLabel'">
    {{order.withdrawalPoint.frontLabel}}
  </td>
  <td data-title="'Type de paiement'" sortable="'paymentType.frontLabel'">
    {{order.paymentType.frontLabel}}
  </td>
  <td data-title="'Type d\'offre'" sortable="'offerType.frontLabel'">
    {{order.offerType.frontLabel}}
  </td>
  <td data-title="'Référence de l\'offre'" sortable="'offerReference'">
    {{order.offerReference}}
  </td>
     </tr>
    </table>
  </div>

我无法在HTML中检索这些值。我做错了什么？谢谢你

Answer 1

<tr ng-repeat="order in $data">

应该是

<tr ng-repeat="order in data">

你不使用ng-directives的$ inside

使用ngTable检索json数据（Angular）

1 个答案: