对对象数组应用 ng-repeat 会显示 [Object object]

Question

我有一个如下所示的控制器：

var PlayersController = function($scope, $http) {
    $http.get('/Players/Index').success(function (data) {
        console.log(data);
        $scope.players = data;
    });
}

PlayersController.$inject = ['$scope','$http'];

我的路由如下所示：

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

KorpenApp.controller('HomeController', HomeController);
KorpenApp.controller('PlayersController', PlayersController);

var configFunction = function($routeProvider) {
    $routeProvider
        .when('/Players', { templateUrl: 'Players/Index', controller: PlayersController })
    .otherwise({redirectTo: '/'});
}

configFunction.$inject = ['$routeProvider'];
KorpenApp.config(configFunction);

我的视图（玩家/索引）如下所示：

<p>TEST</p>
<p>{{players.length}}</p>
<ul ng-repeat="player in players">
    <li ng-repeat="prop in player">
        {{prop}}
    </li>
</ul>

播放器控制器中的控制台日志记录了一个包含 5 个对象的数组，这是应该的。这些对象包含许多我要显示的属性。但是，我的视图只显示：

[对象对象],[对象对象],[对象对象],[对象对象],[对象对象]

似乎视图中的所有内容都被忽略了，所以很明显我做错了什么。我会认为至少包含“TEST”的段落会显示，即使玩家数组有问题。所以我的两个问题是：

1. 为什么我的视图显示“[object Object],[object Object],[object Object],[object Object],[object Object]”？
2. 为什么我放在 Players/Index 中的东西没有显示？

Answer 1

您需要执行以下操作：

var PlayersController = function($scope, $http) {
    $http.get('/Players/Index').success(function (data) {
        console.log(data);
        $scope.players = data;
    });
}

PlayersController.$inject = ['$scope','$http'];

在视图中：

<p>TEST</p>
<p>{{players.length}}</p>
<ul ng-repeat="player in players">
    {{player.prop}}
</ul>

Answer 2

1. 因为这是打印对象的方式。如果你想要这个对象的 json 表示，使用

   console.log(angular.toJson(data));
   

2. 很难说。也许视图实际上不在此 URL 上。查看浏览器开发工具的“网络”选项卡，查看返回的内容。