$http服务angular不工作

$http service angular not working

本文关键字：工作 angular 服务 http      更新时间：2023-09-26

我在控制器中使用Angular的$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>

///////////////////////

这是json文件：

[
{
    "age": 0, 
    "id": "motorola-xoom-with-wi-fi", 
    "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
    "name": "Motorola XOOM'u2122 with Wi-Fi", 
    "snippet": "The Next, Next Generation'r'n'r'nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
}, 
{
    "age": 1, 
    "id": "motorola-xoom", 
    "imageUrl": "img/phones/motorola-xoom.0.jpg", 
    "name": "MOTOROLA XOOM'u2122", 
    "snippet": "The Next, Next Generation'n'nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
}, 
{
    "age": 2, 
    "carrier": "AT&T", 
    "id": "motorola-atrix-4g", 
    "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", 
    "name": "MOTOROLA ATRIX'u2122 4G", 
    "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone."
}, 
{
    "age": 3, 
    "id": "dell-streak-7", 
    "imageUrl": "img/phones/dell-streak-7.0.jpg", 
    "name": "Dell Streak 7", 
    "snippet": "Introducing Dell'u2122 Streak 7. Share photos, videos and movies together. It'u2019s small enough to carry around, big enough to gather around."
}]

请参阅此处http://plnkr.co/edit/17K7bH7IQ1RgwY6JZMiN?p=preview

更改您的呼叫，使您可以查看$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);
  });

您的问题可能是必须允许在web.config中加载json文件：

<staticContent>
    <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>

我也遇到过类似的问题，并用这个解决了它。希望能有所帮助。：）

相关文章：