Question

我制作了一个JSON api。我喜欢用angular.js来查询。在我的网络服务器上，我看到请求进来，并返回状态200，因此数据由angular调用。但是出于某些原因，我无法在屏幕上显示。

The url for the JSON is:  http://127.0.0.1:8000/food/myjson/

当我直接使用chrome调用url时，我的屏幕上会收到输出：

[{"persons": 4, "name": "Pasta Bolognese", "description": "Pasta met een saus op tomaten basis"}, {"persons": 2, "name": "Pasta Carbonara", "description": ""}, {"persons": 4, "name": "Pizzadeeg voor Big Green Egg", "description": ""}, {"persons": 2, "name": "Low and Slow Ribs", "description": ""}]

我的HTML：

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-resource.min.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
</script>

</head>

<body>
<div ng-app="myApp">
    <div ng-controller="UserCtrl">
        dish = {{ dish }}<br/>
    </div>
</div>
</body>

</html>

我的剧本：

var myApp = angular.module('myApp', []);

myApp.controller('UserCtrl', ['$scope', '$http', function ($scope, $http) {


  $scope = {};

  $scope.dish = '';

  $http({
    method: 'GET',
    url: 'http://127.0.0.1:8000/food/myjson/'
  })
  .success(function (data, status, headers, config) {
    $scope.dish = data;
  })
  .error(function (data, status, headers, config) {
    // something went wrong :(
  });
}]);

我也尝试过迭代数据，因为数组会回来。我这样做了：

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-resource.min.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
</script>

</head>

<body>
<div ng-app="myApp">
    <div ng-controller="UserCtrl">
        <div ng-repeat="x in dish">
            {{ x.name }}<br/>
        </div>
</div>
</body>

</html>

但也没有回应。但每当我刷新屏幕时，json调用都会完成。

我想我错过了一些基本的东西，但我似乎无法弄明白。任何帮助都会很棒！

也许有一种方法可以明确地将所有内容放在屏幕上的范围内，以便进行类似的调试？

Answer 1

这就是绊倒你的路线......

$scope = {};

通过执行此操作，您将覆盖正在注入控制器的对象，您可以随意添加它，但不要将其完全设置为新的。

删除之后你想要用你的ng-repeat例子包含，因为返回的数据是一个数组，虽然看着你有一个没有关闭的div标签，所以你会想要添加另一个<\div>

我可以查询我的api调用，但我无法通过angular显示它

1 个答案: