如何使用 Angularjs 将 JSON 数组作为智能 Table 数据回显

Question

我是 Angular 的新手，并尝试根据我从 REST api 获取的数据使用 Smart Table 构建 table。我可以使用手动输入的数据构建 table，但是当我尝试从服务器插入 JSON 数据数组时，结果 table 为空。

目前我有以下设置： dataFactory.js - 调用 API 并获得 JSON 响应：

app.factory('dataFactory', ['$http', function($http) {

  var urlBase = 'http://myurl.com/api';
  var dataFactory = {};

  dataFactory.getOrders = function() {
    return $http.get(urlBase + '/orders');
  };

  return dataFactory;
}]);

我的观点相当基础，使用智能 Table 扩展时看起来像这样：

<div ng-controller="MainController">
    <table st-table="ordersTable" class="table table-striped">
        <thead>
        <tr>
            <th st-sort="createdBy">Name</th>
            <th st-sort="id">ID</th>
            <th st-sort="state">State</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in ordersTable">
            <td>{{row.createdBy}}</td>
            <td>{{row.id}}</td>
            <td>{{row.state}}</td>
        </tr>
        </tbody>
    </table>
</div>

我的 MainController.js 处理和存储数据，并构建 table:

app.controller('MainController', ['$scope', 'dataFactory', function($scope, dataFactory) {
  $scope.status;
  $scope.orders;
  getOrders();

  function getOrders() {
    dataFactory.getOrders()
      .success(function(ord) {
        $scope.orders = ord;
      })
      .error(function(error) {
        $scope.status = 'Unable to load order data: ' + error.message;
      });
  }

  $scope.ordersTable = [
    // If I build the data manually the table builds using the following 3 lines
    //{createdBy: 'Laurent', id: '56433', state: 'Open')},
    //{createdBy: 'Blandine', id: '34367', state: 'Open')},
    //{createdBy: 'Francoise', id: '34566', state: 'Closed'}
    //... however I actually want the data to come from the JSON array returned by my factory like this:

    $scope.orders
  ];
}]);

我做错了什么？如何让我的数据显示在 table 中？

Answer 1

在成功回调中，您正在更新 $scope.orders 而不是 $scope.orderTable。顺便说一句，使用 promise 函数代替成功和错误回调（摘自 angularjs 文档）：

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.

如何使用 Angularjs 将 JSON 数组作为智能 Table 数据回显

How to echo JSON array as Smart Table data with Angluarjs

arrays

angularjs

json

smart-table