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' 
       }; 

})();