Question

我是基于AngularJS和JS的Web开发的新手，我正在尝试将我的投资组合网站作为单页AngularJS应用程序。我想将我之前的所有项目数据放在一个JSON文件中，并使用JS来获取数据并在HTML列表或表格中动态显示它。我已经尝试过对此进行大量研究，但它没有用。我的代码发布在下面。

myApp.controller('portController', function($scope, $http){
    
    $scope.test = "TEST PHRASE";
    
    $http.get('../projects.json').success(function(data) {
       $scope.projects = data;
   });

});

<div class="jumbotron text-center">
	<h1>Portfolio Home</h1>
    
    <p>{{ test }}</p>
    
    <table>
        <tr ng-repeat="project in projects">
            <td>{{project.title}}</td>
            <td>{{project.date}}</td>
        </tr>
    </table>
    
</div>

[
{
    "title" : "Sample Title", 
    "date" : "01/01/2001"
},
{
    "title" : "Sample Title 2", 
    "date" : "02/02/2002"
}
]

注意：我有一个JS文件，它根据URL控制页面上显示的内容（它处理所有路由），我正在使用ng-view并在某个页面上更改控制器以使用上面的html 。 {{test}}位工作正常，直到我在http请求中添加。

Answer 1

在选项

下方实现预期用途

将 .success 更改为 .then ，因为.success有效至Angularjs 1.4
要使用ng-repeat进行渲染，请使用$ scope.projects = response.data，如下所示

    var myApp = angular.module('test',[]);
    
    myApp.controller('portController', function($scope, $http){
            $http({
                method: 'get', 
                url: '../projects.json'
            }).then(function (response) {
                $scope.projects= response.data;
            },function (error){
                console.log(error);
            });
    });

如何在AngularJS单页面应用程序中显示JSON数据？

1 个答案: