角度表示jsonの単一のレコード

Question

私はちょうどAngularを使い始めて、$ http（取得）を使って返されている単一のレコードを表示する問題を持っています。私はデータを正しく戻しています。これは...

Name: {{udCtrl.name}} 

私が持っている....

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

も試み、他のバリエーションのカップルしているhtmlです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を変更すると動作します。

どこが間違っているのか、返された名前が表示されないのはわかりません。

Answer 1

$scopeに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; 
    } 

} 

EDIT

あなたは、コントローラ上のthis変数の下に変数を定義するudCtrl referanceを使用する場合の例。 `` user`に割り当てる場合

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

} 

ABSOLUTE ANSWER FOR EDIT 2

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

})();