Fatal编程技术网

Javascript $http服务不工作

javascript angularjs

Javascript $http服务不工作,javascript,angularjs,Javascript,Angularjs,我正在利用Angular在controller中的$http服务向web服务器发出http请求，以获取app/phones/phones.json文件中的数据。但手机列表不会通过index.html显示 app/js/controllers.js： var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($s

我正在利用Angular在controller中的$http服务向web服务器发出http请求，以获取app/phones/phones.json文件中的数据。但手机列表不会通过index.html显示

app/js/controllers.js：

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

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data;
  });
  $scope.orderProp = 'age';
 }]);
/////////// index.html：

<html  ng-app="phonecatApp" ng-controller="PhoneListCtrl">
<head>
    <meta charset="utf-8">
    <title>Google Phone Gallery:{{query}}</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/app.css">
    <script src="bower_components/angular/angular.js"></script>
    <script src="js/controllers.js"></script>
</head>
<body >
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                <!--Sidebar content-->
                Search:<input ng-model="query">
                Sort by:
                <select ng-model="orderProp">
                    <option value="name">Alphabetical</option>
                    <option value="age">Newest</option>
                </select>
            </div>

            <div class="col-md-10">
                <!--Body content-->
                <ul class="phones">
                    <li ng-repeat="phone in phones| filter:query|orderBy:orderProp">
                        <span> {{phone.name}} </span>
                        <p>{{phone.snippet}}</p>
                    </li>
                </ul>
            </div>
        </div>  

    </div>


    <div style="padding:100px">
    Additional
    <p> Total number of phones:{{phones.length}}</p>
    <p>Hello,{{name}}!</p>

    <table>
        <tr><th>row number</th></tr>
        <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td><td>{{i + 1}}</td></tr> 

    </table>

    </div>
</body>
</html>
您的问题可能是您必须允许在web.config中加载json文件：

<staticContent>
    <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
我也遇到过类似的问题，用这个解决了。 希望有帮助。：）

请看这里

更改您的get呼叫，该呼叫允许您查看$get不工作的原因

$http.get('phones.json').then(function(response) {
    $scope.phones = response.data;
  },
  //failed $get call
  function(a, b, c) {
    alert("can't get data")
    console.log(a);
    console.log(b);
    console.log(c);
  });
您的结论基于？$scope.phones=data.data；或者从服务器显示数据格式您确定从通话中获得了
数据吗？我复制了代码，它似乎显示了所有手机。能否检查控制台是否正在获取所有文件/json。@Kop4Lyf如何检查控制台是否正在获取所有文件/json？在您的web.config文件的标记下。并确保将其包含在IIS服务器上，创建新的MIME类型JSON，添加扩展名：.JSON和MIME类型：application/JSON。我在加载.json文件时遇到问题，通过以下步骤解决了这个问题。

$http.get('phones.json').then(function(response) {
    $scope.phones = response.data;
  },
  //failed $get call
  function(a, b, c) {
    alert("can't get data")
    console.log(a);
    console.log(b);
    console.log(c);
  });