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

在$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;
    }

}

编辑

如果你想使用 udCtrl 引用，在 Controller 上的 this 变量下定义变量。

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

}

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

})();