Angular显示json的单个记录

Question

我刚开始使用Angular，并遇到显示使用$ http（get）返回的单个记录的问题。我正确地获取数据。这是HTML我有....

<div ng-controller="UserDataController as udCtrl"> 
    Name: {{udCtrl.user.name}} 
</div> 

<div id="debug" style="margin-top:24px;border:solid 1px #900;background:#efefef;min-height:100px"></div> 

也试图和一些其他变化的...

Name: {{udCtrl.name}} 

的Javascript：

(function() { 

var app = angular.module('rtcTimesheet', []); 
var servicePath="/angular/"; 
$("#debug").append("Starting...<br/>"); 

app.controller("UserDataController",["$http",function($http){ 

    var user=this; 
    user=[]; 

    $http({ 
     method:  'GET', 
     url:  servicePath+'login.php', 
     params: { 
      un:  "username", 
      pwd: "123456789" 
     } 
    }).then(function(response){ 

     if(response.data.hasOwnProperty("HasError")) { 
      $("#debug").append("ERROR: " + response.data.ErrorMessage); 
     } else { 
      $("#debug").append("Data: " + JSON.stringify(response.data)); 
      user=response.data; 
     } 

    },function (err){ 
     alert("ERROR: "+err.status); //data, status, headers, config, statusText 
    }); 

}]); 

app.controller("UserTest",function(){ 
    this.user=users; 
}); 

var users = { 
       id: '1', 
       name: 'Joe Bloggs' 
       }; 

})(); 

这是以JSON格式返回，我可以在我创建的小调试区域中看到它。

{"data":{"id":"1","name":"Joe Bloggs"} 

如果我改变html使用下面的代码它的作品。

<div ng-controller="UserTest as udCtrl"> 
    Name: {{udCtrl.user.name}} 
</div> 

我只是不能看到我要去哪里错了，为什么它不会显示返回的名称。

Answer 1

定义上的user变量，并通过$scope.user访问它。你有问题。

例

//Define user variable like this. 
$scope.user = {}; 

//On response --> 
}).then(function(response){ 

    if(response.data.hasOwnProperty("HasError")) { 
     $("#debug").append("ERROR: " + response.data.ErrorMessage); 
    } else { 
     $("#debug").append("Data: " + JSON.stringify(response.data)); 
     $scope.user=response.data; 
    } 

} 

编辑

如果你想使用udCtrl全球化志愿服务青年下的控制器this变量定义变量。将其分配给`user`，所以`用户= JSON.stringify（response.data）`时

//Define user variable like this. 
var ctrl = this; 
ctrl.user = {}; 

//On response --> 
}).then(function(response){ 

    if(response.data.hasOwnProperty("HasError")) { 
     $("#debug").append("ERROR: " + response.data.ErrorMessage); 
    } else { 
     $("#debug").append("Data: " + JSON.stringify(response.data)); 
     ctrl.user=response.data; 
    } 

} 

EDIT 2绝对ANSWER

(function() { 

var app = angular.module('rtcTimesheet', []); 
var servicePath="/angular/"; 
$("#debug").append("Starting...<br/>"); 

app.controller("UserDataController",["$http",function($http){ 

    var udCtrl=this; 
    udCtrl.user=[]; 

    $http({ 
     method:  'GET', 
     url:  servicePath+'login.php', 
     params: { 
      un:  "username", 
      pwd: "123456789" 
     } 
    }).then(function(response){ 

     if(response.data.hasOwnProperty("HasError")) { 
      $("#debug").append("ERROR: " + response.data.ErrorMessage); 
     } else { 
      $("#debug").append("Data: " + JSON.stringify(response.data)); 
      udCtrl.user=response.data; 
     } 

    },function (err){ 
     alert("ERROR: "+err.status); //data, status, headers, config, statusText 
    }); 

}]); 

app.controller("UserTest",function(){ 
    this.user=users; 
}); 

var users = { 
       id: '1', 
       name: 'Joe Bloggs' 
       }; 

})();