Question

我想要创建一个基本的AngularJS应用程序，它从.json文件中提取我的值。我运行它时，我的代码没有错误，但它没有提取JSON值。我确信这是一件简单而愚蠢的事情，我很遗憾，但遗憾的是我无法理解。此外，我在控制器内部的{{1 + 2}}函数就在那里，所以我可以测试以确保应用程序没有错误地出现在我身上。

的index.html

<!doctype html>
<html ng-app='phonebook'>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="js/phonebook.js"></script>
</head>

<body>
    <div ng-controller="getPhonebook">
        <ul>
            <li ng-repeat="contact in phonebook.entries">
                {{contact.name}} {{1+2}}
            </li>
        </ul>   
    </div>
</body>
</html>

JS / phonebook.js

(function() {
    var app = angular.module('phonebook', [ ]);



    app.controller("getPhonebook", function($scope, $http) {
      $http.get('js/phonebook.json').
        success(function(data, status, headers, config) {
          $scope.phonebook = data;
        }).
        error(function(data, status, headers, config) {
          alert('error');
        });
    });

})();

JS / phonebook.json

{
    "entries" : [
        {
        "Name" : "Entry One",
        "Department" : "Department A",
        "Number" : [
            {
                "Name" : "Front Line",
                "Phone" : "1234567890",
                "Tieline" : "84543982"
            },
            {
                "Name" : "Back Line",
                "Phone" : "1243568790",
                "Tieline" : "58472989"
            }
        ],
        "Hours" :
            {
                "Sunday" : false, 
                "Monday" : "9AM – 6PM", 
                "Tuesday" : "9AM – 6PM", 
                "Wednesday" : "9AM – 6PM", 
                "Thursday" : "9AM – 6PM", 
                "Friday" : "9AM – 6PM", 
                "Saturday" : "9AM – 6PM"
            },
        "Description" : "…"
    }
    ]
}

Answer 1

请参阅此处了解演示http://plnkr.co/edit/MLTlizDbck1tzciWltOd?p=preview

在您的HTML中，您{{contact.name}}代替{{contact.Name}}

HTML：

<body ng-controller="getPhonebook">

    <div ng-repeat="contact in phonebook.entries">
      {{contact.Name}}
       <ul><li ng-repeat="number in contact.Number">{{number.Name}} | {{number.Phone}}</li></ul>
    </div>


</body>

JS： var app = angular.module（'app'，[]）;

app.controller('getPhonebook', function($scope, $http) {



   $http.get('phonebook.json').
        success(function(data, status, headers, config) {
          $scope.phonebook = data;
        }).
        error(function(data, status, headers, config) {
          alert('error');
        });

});

AngularJS HTTP.get请求无法正常工作

1 个答案: