AngularJS：使用mySQL數據庫進行雙向數據綁定

Question

我目前正在學習一些東西來教授自己AngularJS，而且我正在運行雙向數據綁定的問題。我現在已經設置它來從數據庫中獲取信息。

當我調用鏈接時，我從數據庫接收信息。我首先搜索用戶。在這種情況下，我搜索了胡安娜卡斯蒂略。

localhost:8080/api/person?name=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" 
    } 
} 

我的問題是，得到這個信息後，有什麼通常人們的雙向數據綁定的方式將此信息顯示給前端？

我用下面建我的網頁：

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承諾的結果是一個對象，表示HTTP響應，具有以下字段：

• 狀態
• 數據
• 標頭
• 配置

沒有理由使用$ scope。$ apply（），並且不應該將單個字段放在範圍中。只要把整個人對象：

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

然後在您的視圖：

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

我強烈建議你花一些時間學習如何使用您的瀏覽器調試器。通過使用調試器檢查響應的結構（甚至僅通過將其打印到控制檯），您就可以輕鬆找到。