当前位置: 代码迷 >> JavaScript >> AngularJS-无法显示JSON中的内容
  详细解决方案

AngularJS-无法显示JSON中的内容

热度:69   发布时间:2023-06-12 13:51:21.0

我只是从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>

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

仅显示当前视图中的一项:

$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 ,所以请更改后端以返回单个对象,并使代码保持不变

  相关解决方案