Question

我正在进行AngularJS教程，即使代码与教程中的代码完全相同，我也无法完成以下工作 -

controller.js -

var phoneApp = angular.module('phoneApp', []);

phoneApp.controller('PhoneCtrl', function ($scope, $http) {
$http.get('https://github.com/angular/angular-phonecat/blob/master/app/phones/phones.json').success(function(data) {
$scope.phones = data;
});

$scope.orderProp = 'age';
});

HTML -

<!DOCTYPE html>
<html lang="en" ng-app="phoneApp">
<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>
<script src="controller.js"></script>

<body ng-controller="PhoneCtrl">

Search: <input ng-model="query" >

<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>

<ul >
    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
    {{phone.name}}  
    <p>{{phone.snippet}}</p>
    <p>{{phone.foo}}</p>
    </li>
</ul>   

</body>

</html>

这什么都不做，我看不到JSON文件中的数据

有人可以指出我错过了什么吗？谢谢！

Answer 1

你的json实际上不是json ...它的github页面......你想要这个url

https://raw.github.com/angular/angular-phonecat/master/app/phones/phones.json

Answer 2

问题不在于您的客户，而在于您的服务器

请参阅https://rawgit.com/faq

这几乎是相同的代码指向不同的URL并且它可以工作。

var phoneApp = angular.module('phoneApp', []);

phoneApp.controller('PhoneCtrl', function ($scope, $http) {
$http.get('http://cdn.rawgit.com/angular/angular-phonecat/master/app/phones/phones.json').success(function(data) {
$scope.phones = data;
});

$scope.orderProp = 'age';
});

无法显示JSON文件中的数据

2 个答案: