AngularJS 控制器不使用 ng-repeat

Question

我正在尝试使用一个控制器为一个表生成两个对象。控制器如下所示：

function LineItemController($scope, $http) {
  $scope.fields = [{id: 0}];
  $scope.addNewChoice = function() {
    $scope.fields.push({id: ($scope.fields.length)});
  }
  $scope.lineItems = [];
  $scope.getlineItems = function() {
    $http.get('<%= line_items_path(:json) %>?invoice_id=<%= params[:id] %>').then(function(lineItems) {
      console.log(lineItems);
      return $scope.lineItems;
    });
  };
 $scope.lineItems = $scope.getlineItems();
};

HTML如下：

<div ng-controller="LineItemController">
<table>
  <thead><th>Quanity</th><th>Description</th><th>Price Per</th><th>Discount</th><th>Line Item Total</th></thead>
      <tr ng-repeat="lineItem in lineItems">
        <td>{{ lineItem.name }}</td>
        <td>{{ lineItem.quantity }}</td>
    </tr>
  <tr ng-repeat="field in fields">
 ....
</tr>
</table>

第二个 ng-repeat 工作正常。第一个似乎没有遍历对象。我检查了控制台，并使用 http get 请求正确地拉入了阵列。如果我预先填充以读取 $scope.lineItems = [{"name": 15, "quantity": 12 }];它将能够调用 15 和 12。所以我认为我的代码中的故障是调用该函数并将其设置为等于 $scope.lineItems。在调用我缺少的函数时是否需要包含其他 [] 或 {}。我正在使用 rails 4，但禁用了 turbolinks。

Answer 1

首先，您的函数 $scope.getlineItems 似乎没有返回任何内容。

此外，$http.get 方法将返回一个承诺，因此您不想将它直接分配给您的 $scope.lineItems 变量。相反，在then 回调中，将您的数据分配给$scope.lineItems

$scope.getlineItems = function() {
    $http.get('<%= line_items_path(:json) %>?invoice_id=<%= params[:id] %>').then(function(lineItems) {
      console.log(lineItems);
      $scope.lineItems = lineItems;
    });
  };
 $scope.getlineItems();