Question

我正在尝试使用angular.js应用程序中的mysql数据库中的数据。我已经阅读了几个教程，但没有一个能为我工作。

我有一个PHP脚本，它返回一个JSON数组。示例结果：

[{"id":"1","name":"Fran","text":"21-15-9 Reps for Time:\r\nThruster (95lbs\/ 44kg)\r\nPull-Ups","wodtype":"Benchmark"},{"id":"2","name":"Angie","text":"1 Round for Time:\r\n100 Pull-Ups\r\n100 Push-Ups\r\n100 Sit-Ups\r\n100 Air Squats","wodtype":"Benchmark"},{"id":"3","name":"Barbara","text":"5 Rounds for Time:\r\n20 Pull-Ups\r\n30 Push-Ups\r\n40 Sit-Ups\r\n50 Air Squats\r\n\r\n3 Minute Rest","wodtype":"Benchmark"},{"id":"4","name":"Chelsea","text":"30 Minutes EMOM\r\n5 Pull-Ups\r\n10 Push-Ups\r\n15 Air Squats","wodtype":"Benchmark"},{"id":"5","name":"Cindy","text":"20 Minute AMRAP\r\n5 Pull-Ups\r\n10 Push-Ups\r\n15 Air Squats","wodtype":"Benchmark"}]

我的应用程序如下所示：

<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>

<body>
    <div ng-controller="GetWodList"> 
                <div ng-repeat="x in wodList">
                    {{x.id}}<br />
                    {{x.name}}<br />
                    {{x.text}}<br />
                    {{x.wodtype}}<br />
                </div>
        </div>

    </body>

<script>
    function GetWodList($scope, $http) {
    $http.get('https://foo.com/getList.php').
        success(function(data) {
            $scope.wodList = data;
        });
    }
</script>

结果是一个空页面。我遵循了本教程：http://www.phpro.org/tutorials/Consume-Json-Results-From-PHP-MySQL-API-With-Angularjs-And-PDO.html#5

Answer 1

声明app模块
将GetWodList注册为控制器

var appname = angular.module('appname', []);
appname.controller('GetWodList', ['$scope', '$http', function($scope, $http) {
    $http.get('https://foo.com/getList.php')
         .success(function(data) {
             $scope.wordList = data;
          });
    }]);

<!DOCTYPE html>
<html ng-app="appname">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  </head>

  <body>
    <div ng-controller="GetWodList">
      <div ng-repeat="x in wordList">
        {{x.id}}<br />
        {{x.name}}<br />
        {{x.text}}<br />
        {{x.wodtype}}<br />
      </div>
    </div>
  </body>

</html>

angular.js使用mysql db中的数据

1 个答案: