AngularJS ng-repeat不能使用$ http.get

时间:2014-07-17 14:18:30

标签: angularjs angularjs-scope angularjs-ng-repeat

所以我有一个基本页面,我可以在范围内手动定义json数据,一切正常。

示例:

<!DOCTYPE html>
<html ng-app="ordersApp">
<head>

<scrip src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular.js"></scrip>
</head>
<body>

<h1>Recent Orders</h1>
<table ng-controller="orderCtrl">
<tr>
<th>Order Date</th>
<th>Stock Description</th>
<th>Order #</th>
<th>Order Value</th>

</tr>


      <tr ng-repeat="item in orders track by $index">
        <td>[[item.oh_statusdate]]</td>
        <td>[[item.ol_stockdesc]]</td>
        <td>[[item.oh_orderno]]</td>
        <td>[[item.oh_ordervalue]]</td>

    </tr>

</table>

 <scrip>

// register the app
var ordersApp = angular.module('ordersApp', []);
// alllow [[var]] instead of {{var}} for jinja2
this.ordersApp.config(function($interpolateProvider) { 
          $interpolateProvider.startSymbol('[['); 
          $interpolateProvider.endSymbol(']]');
        });
// create a controller inside the app
ordersApp.controller('orderCtrl', function ($scope) {
    // assign the json data
  $scope.orders = [
              {"ol_stockdesc": "EALANT", 
              "oh_statusdate": "2014-07-02", 
              "oh_custaccref": "416", 
              "oh_ordervalue": null, 
              "oh_orderno": 449605}, 

              {"ol_stockdesc": " BAG 25kg A", 
              "oh_statusdate": "2014-07-04", 
              "oh_custaccref": "416", 
              "oh_ordervalue": null, 
              "oh_orderno": 449824}, 

              {"ol_stockdesc": "BOTTLE B", 
              "oh_statusdate": "2014-07-04", 
              "oh_custaccref": "416", 
              "oh_ordervalue": null, 
              "oh_orderno": 449824}, 

              {"ol_stockdesc": "CREDIT CARD ADMIN & SURCHARGE", 
              "oh_statusdate": "2014-07-04", 
              "oh_custaccref": "416", 
              "oh_ordervalue": null, 
              "oh_orderno": 449824}
              ];
});
</scrip>

</body>

</html>

以上工作正常,但是如果我尝试执行以下操作:

// register the app
var ordersApp = angular.module('ordersApp', []);
// alllow [[var]] instead of {{var}} for jinja2
this.ordersApp.config(function($interpolateProvider) { 
          $interpolateProvider.startSymbol('[['); 
          $interpolateProvider.endSymbol(']]');
        });
ordersApp.controller("orderCtrl", function($scope, $http) {
  $http.get('http://0.0.0.0:6543/orders.json?customer=416').
    success(function(data, status, headers, config) {
      $scope.orders = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});

它不起作用,我可以用dev工具检查请求并看到数据请求成功,并且还检查$ scope并且我的数据在那里,控制台也没有记录任何错误。如果有人能够对此有所了解,我将不胜感激。请注意,由于我的防火墙我无法发布标签,因此我的示例代码显示为“scrip”而不是“script”。

1 个答案:

答案 0 :(得分:0)

您可以尝试用$scope包围$apply更改吗?像这样:

$scope.$apply($scope.orders = data);

原因可能是,在你的clojure中,$scope范围不具有相同的含义。

避免这样做的一种方法是使用$resource代替$http,因为它会使用未来,并且会在请求结束时很好地填充数组