[AngularJS]在 JSON 数据文件不显示在 html 中

发布时间: 2017/4/16 21:23:56
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我使用 AngularJS 将数据加载到 html 文件中我和我的本地服务器是 wamp 服务器。但在 JSON 中的记录文件未加载到 index.html 页面。

Index.html:

<head>
    <meta charset = "UTF-8">
    <title>AngularJS | $http Service</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <script src = "controller.js"></script>
</head>
<body ng-app = "mainApp">
    <div ng-controller = "people">
        <ul>
            <h2>Names and Age of Programmers in Colombo</h2>
            <li ng-repeat = "person in persons">
                {{ person.name + ' : ' + person.age }}
            </li>
        </ul>
    </div>
</body>

Controller.js:

var app = angular.module('mainApp', []); 
app.controller('people', function($scope, $http) {
  $http.get('http://localhost/angular/Tut16_httpService/database.json').success (function(response) {
    $scope.persons = response.records;
  }); 
});

database.json:

{
"records": [
    {
        "Name":"Mehul",
        "Age":"18"
    },
    {
        "Name":"Jai",
        "Age":"24"
    },
    {
        "Name":"Alex",
        "Age":"27"
    },
    {
        "Name":"Rahul",
        "Age":"30"
    }
] 
}

输出为︰enter image description here

任何帮助吗?

解决方法 1:

属性名称应该是 json 文件一样。

将其转换

{{ person.name + ' : ' + person.age }}

对此

{{ person.Name + ' : ' + person.Age }}
赞助商