AngularJS - 无法显示来自 JSON 的内容答案

【问题标题】：AngularJS - Can't Display Content from JSONAngularJS - 无法显示来自 JSON 的内容
【发布时间】：2015-10-06 14:47:44
【问题描述】：

我刚开始使用 AngularJS，但在使用 {{ 表达式 }} 从 JSON 中提取数据时遇到了问题，我通过 $http.get 获得了这些数据。 JSON 对象运行良好，因为我能够将其记录到控制台。但是当我尝试在 view.html 中显示它时，表达式是空的。也许这只是小事，但我想不通。

下面的代码sn-ps

路由片段：

$routeProvider
.when('/contacts/:contactId', {
     controller: 'ContactController',
     templateUrl: 'js/views/contact.html'
})
.otherwise({
     redirectTo: '/'
});

控制器：

app.controller('ContactController', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
    $http.get($routeParams.contactId + '.json').success(function(data) {
        $scope.detail = data;
    })
    .error(function(data) {
        return data;
        console.log("Failed to get data")
    });
    $scope.pageClass = 'contact-screen';

}]);

contact.html 视图片段：

<div class="text-container">
        <h2 class="name"> {{ detail.name }} </h2>
        <h3 class="subtitle"> "{{ detail.subtitle }}" </h3>
</div>

【问题讨论】：

data 长什么样子？
@charlietfl 数据是一个 JSON 对象，看起来像 [ { "name": "Guiron", "subtitle": "Space critter", "url": "http://eightninecollective.com/contacts-api/guiron.png", "phone": "1-800-SPACE", "email": "guiron@spaceplanet.info" } ]

标签： javascript angularjs json url-routing

【解决方案1】：

您有一个包含数据对象的数组，而不是您的代码当前指示的单个对象。

仅显示您当前视图中的一项：

$scope.detail = data[0];

但是由于您可能会有多个控制器保持不变并使用ng-repeat 来遍历数组

<div class="text-container" ng-repeat="item in detail">
        <h2 class="name"> {{ item.name }} </h2>
        <h3 class="subtitle"> "{{ item.subtitle }}" </h3>
</div>

或者，既然您在 url 中有 :contactId，请更改后端以返回单个对象并保持您的代码不变

【讨论】：

太棒了！谢谢，我在网站的其余部分是 ng-repeat，但不是这部分，现在添加了它，一切都很好。