AngularJS-無法顯示JSON中的內容

Question

我只是從AngularJS開始，在使用{{expressions}}從$ http.get獲取的JSON中提取數據時遇到了問題。 JSON對象運行正常，因為我能夠將其記錄到控制台。 但是，當我嘗試在view.html中顯示它時，表達式為空。 也許只是一些小東西，但我無法弄清楚。

下面的代碼段

路由摘要：

$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>

Answer 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 ，所以請更改后端以返回單個對象，並使代碼保持不變