Question

所以我在教自己Angular.js。根据我在网上找到的教程，我使用Laravel创建了一个RESTful API来存储URL。设置了基本身份验证，当前用户ID已登录。我想在index函数中获取返回的JSON，这是数据库中user_id与授权用户ID匹配的所有URL：

public function index()
{
    $urls = Url::where('user_id', Auth::user()->id)->get();

    return Response::json(array(
        'error=> false,
        'urls' => $urls->toArray()),
         200
    );
}

我相信JSON正在返回，当我访问我的本地网站http://readitlater.loc/api/v1/url时，我得到了一系列对象。在我的索引页面上，我将ng-app指令定义为html元素的属性：

<html lang="en" data-ng-app="">

我有一个定义构造函数的脚本：

<script>
function mainController($scope, $http) 
{
    $http.get("http://readitlater.loc/api/v1/url/")
    .success(function(response) {$scope.urls = response;});
}

</script>

readitlater.loc / api / v1 / url是我在API中索引的路径。当我在浏览器中输入它时，我得到一个对象数组，我猜测它是正在创建的JSON。出于某种原因，我无法在浏览器中显示它：

<body class="container" data-ng-controller="mainController">
<ul class="list-group">
        <li class="list-group-item" ng-repeat="address in urls">
        {{ address.url }}
        </li>
    </ul>

Answer 1

根据您的评论，您的$scope.urls有urls个对象，此对象包含url key。所以你可以按如下方式更改你的代码

<ul class="list-group">
  <li class="list-group-item" ng-repeat="address in urls.urls">
   {{ address.url }}
  </li>
</ul>

Answer 2

验证您使用的变量包含您的想法通常很方便。您可以在设置值时执行console.log或console.dir，但在您尝试使用它们的HTML右侧显示它们也可以帮助解决范围问题。在这里，我将您的代码更改为：

<pre>{{urls|json}}</pre>
<ul class="list-group">
    <li class="list-group-item" ng-repeat="address in urls">
    {{ address.url }}
    <br/>JSON: {{address|json}}
    </li>
</ul>

这应该会很快向您显示您的$scope.urls对象如下所示：

{
    error:false,
    urls: [
        { description: "A Great Blog", id: 2, url: "fideloper.com", user_id: 1 }
    ]
}

这是你的$scope.urls对象，所以当你重复它时，你将得到对象的属性，'false'，我假设的数组是你的网址：

// Code goes here

var app = angular.module('MyApp', []);

var ctrl = app.controller('MyCtrl', function($scope) {
  $scope.name = "Jason Goemaat";
  $scope.urls =     {
        error:false,
        urls: [
            { description: "A Great Blog", id: 2, url: "fideloper.com", user_id: 1 }
        ]
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp" ng-controller="MyCtrl">
  <h1>Hello, {{name}}!</h1>

  <pre>{{urls|json}}</pre>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="address in urls">
      {{ address.url }}
      <br/>JSON: {{address|json}}
    </li>
  </ul>
</div>

因此，如果您希望$scope.urls成为您的数组，可以在$ http调用中将其直接设置为返回对象上的urls属性：

$http.get("http://readitlater.loc/api/v1/url/")
.success(function(response) {$scope.urls = response.urls;});

现在你的ng-repeat将在我认为你想要的数组上迭代......

var app = angular.module('MyApp', []);

var ctrl = app.controller('MyCtrl', function($scope) {
  $scope.name = "Jason Goemaat";
  $scope.urls = [
    { description: "A Great Blog", id: 2, url: "fideloper.com", user_id: 1 }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp" ng-controller="MyCtrl">
  <h1>Hello, {{name}}!</h1>

  <pre>{{urls|json}}</pre>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="address in urls">
      {{ address.url }}
      <br/>JSON: {{address|json}}
    </li>
  </ul>
</div>

Angular JS：Http：获取本地API创建的JSON

2 个答案: