ng-repeat 通过对象数组

Question

我正在用 angular JS 和 StamPlay 创建一个小 shoutbox。因此我创建了一些 'Test Shouts' 可以通过 URL

访问

在我的 Angular 应用程序中，我创建了一个服务来获取数据：

app.factory('shouts', ['$http', function ($http) {

    return $http.get('https://shoutbox.stamplayapp.com/api/cobject/v1/shouts').success(function (data) {
        return data.data;
    });

}]);

在我的 MainController 中，我将数据附加到 $scope。

app.controller('HomeController', [
    '$scope',
    'shouts',

    function ($scope, shouts) {
        $scope.shouts = shouts;
    }

]);

但是当我厌倦了 ng-repeat 数据[]时，我无法访问其中的对象。我不明白这是什么问题。

<div ng-repeat="shout in shouts">
  {{shout.title}}
</div>

Answer 1

您是否忘记将控制器连接到 HTML？

<div ng-controller="HomeController">
    <div ng-repeat="shout in shouts">
      {{shout.title}}
    </div>
</div>

关于 ngController 的更多信息：https://docs.angularjs.org/api/ng/directive/ngController

Answer 2

喊叫是一个 $promise 即使你这样做 "return data.data"。所以你需要在承诺解决时分配 $scope.shouts。

app.factory('shouts', ['$http', function ($http) {

    return $http.get('https://shoutbox.stamplayapp.com/api/cobject/v1/shouts');

}]);

app.controller('HomeController', [
    '$scope',
    'shouts',

    function ($scope, shouts) {
       shouts.then(function(data) { $scope.shouts = data.data});
    }

]);

另一种选择是解决路由配置中的呼喊并将其注入控制器

$routeProvider
.when("/home", {
    templateUrl: "home.html",
    controller: "HomeController",
    resolve: {
        shout_data: shouts
    }


app.controller('HomeController', [
    '$scope',
    'shout_data',

    function ($scope, shout_data) {
       $scope.shouts = shout_data;
    }

]);

ng-repeat 通过对象数组

ng-repeat through an Array of Objects

angularjs

stamplay