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

时间:2014-04-16 22:19:13

标签: javascript angularjs angularjs-scope angularjs-ng-repeat angular-ui

我制作了一个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调用都会完成。

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

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

1 个答案:

答案 0 :(得分:0)

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

$scope = {};

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

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