我正在尝试在 angular.js 应用程序中使用来自 mysql 数据库的数据。 我读过一些教程，但没有一个对我有用。
我有一个返回 JSON 数组的 php 脚本。结果示例:
[{"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
最佳答案
- 声明应用模块
- 注册
GetWodList作为 Controller
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>关于javascript - angular.js 使用来自 mysql 数据库的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35887540/