mysql - AngularJS:使用 mySQL 数据库的双向数据绑定(bind)

Question

我目前正在做一些自学 AngularJS 的事情，并且我遇到了双向数据绑定(bind)的问题。我现在已将其设置为从数据库中获取信息。

当我调用该链接时，我会收到来自数据库的信息。我首先搜索用户。在本例中，我搜索了 Juana Castillo。

localhost:8080/api/person?name=Juana+Castillo

“搜索”Juana Castillo 后返回的信息如下:

{
    "count": "1", 
    "input": null, 
    "results": {
        "DateOfBirth": "12/24/1999", 
        "secPosition": "Goalkeeper", 
        "ACT": "20", 
        "Email": "jcastillo@fake.com", 
        "ParentApproval": 0, 
        "Views": "/trunk/files/f00000.txt", 
        "EmailConfidential": 1, 
        "Address": "2 Av. Pres. Castelo Branco, Rio de Janeiro, Brazil", 
        "SAT": "900", 
        "Name": "Juana Castillo", 
        "Level": "Amateur", 
        "CountryPlayingIn": "Brazil", 
        "GPA": 3.5, 
        "Graduation": "May 2016", 
        "priPosition": "Goalkeeper", 
        "Gender": "F", 
        "PhoneNumber": "55 800 062 7222", 
        "Citizenship": "Brazilian", 
        "Links": "/trunk/files/f00000.txt", 
        "Videos": "/trunk/files/f00000.txt", 
        "FieldOfStudy": "/trunk/files/f00003.txt", 
        "Committed": "/trunk/files/f00000.txt", 
        "Sport": "Soccer", 
        "TOEFL": "28"
    }, 
    "method": "GET", 
    "kwargs": {
        "name": "Juana Castillo"
    }
}

我的问题是，在获得这些信息后，人们通常采用什么方式进行双向数据绑定(bind)来将该信息显示给前端？

我使用以下内容构建了我的网页:

1. AngularJS
2. CherryPy 服务器
3. MySQL 数据库

我不使用的东西是:

1. PHP

目前，我第一次处理与从数据库获取信息有关的任何事情，目前我不确定如何在前端显示这些信息。

这是我的尝试:

app.controller('PlayerCtrl', ['$scope',
                       '$location',
                       '$log',
                       '$window',
                       '$rootScope',
                       'Person',
                       function ($scope,
    $location,
    $log,
    $window,
    $rootScope,
    Person) {

    $scope.options;
    $scope.Name;
    $scope.Email;
    $scope.Summary;
    $scope.Position;
    $scope.Gpa;
    $scope.Gender;
    $scope.priPosition;
    $scope.secPosition;
    $scope.ACT;
    $scope.SAT;
    $scope.TOEFL;
    $scope.Citizenship;
    $scope.FieldOfStudy;
    $scope.Sport;
    $scope.Country;
    $scope.Address;
    $scope.DateOfBirth;
    $scope.Level;

    // function for snagging specific DB entries
    $scope.getPage = function (searchOption) {
        Person.get(searchOption).$promise.then(function (data) {
            var pulledData = [];
            pulledData = data.results;
            $scope.$apply(function () {
                $scope.Email = pulledData["Email"];
                $scope.Name = pulledData["Name"];
                $scope.Summary = pulledData["Summary"];
                $scope.Position = pulledData["Position"];
                $scope.Gpa = pulledData["GPA"];
                $scope.Gender = pulledData["Gender"];
                $scope.priPosition = pulledData["priPosition"];
                $scope.secPosition = pulledData["secPosition"];
                $scope.ACT = pulledData["ACT"];
                $scope.SAT = pulledData["SAT"];
                $scope.TOEFL = pulledData["TOEFL"];
                $scope.Citizenship = pulledData["Citizenship"];
                $scope.FieldOfStudy = pulledData["FieldOfStudy"];
                $scope.Sport = pulledData["Sport"];
                $scope.Country = pulledData["CountryPlayingIn"];
                $scope.Address = pulledData["Address"];
                $scope.DateOfBirth = pulledData["DateOfBirth"];
                $scope.Level = pulledData["Level"];

            });
        });
    };


}]);

Answer 1

$http Promise 的结果是一个对象，代表 HTTP 响应，具有以下字段:

• 状态
• 数据
• 标题
• 配置

没有理由使用 $scope.$apply()，并且您不应该将单个字段放入范围中。只需放置整个人对象即可:

    Person.get(searchOption).$promise.then(function (response) {
        $scope.person = response.data.results;
    });

那么在你看来:

{{ person.Name }} {{ person.Email }} (for example)

我强烈建议您花一些时间学习如何使用浏览器调试器。只需使用调试器检查响应的结构(或者甚至只是将其打印到控制台)，您就可以轻松地发现这一点。