javascript - 如何使用angularjs在html页面上显示json数据?

标签 javascript json angularjs

我正在尝试创建一个小 Angular ,它采用 json 文件并将数据显示在 html 页面上。但是我收到以下错误:POST bookmarks/data/bookmarks.json 405 (Method Not Allowed)。

这是我的代码:

<html lang="en" ng-app="bookmarksApp" id="ng-app">
    <head>
        <link rel="stylesheet" href="css/styles.css" />
    </head>
    <body ng-controller="BookmarkController as bookmarksCtrl">
        <article class="main-content" role="main">
            <section class="row">
                <div class="content">
                    <div class="bookmarks-list">
                        <h1>Christine's Bookmarks</h1>
                        <ul>
                            <li ng-repeat="bookmark in bookmarksCtrl.bookmarks" class="">
                                <h3>{{bookmark.name}}</h3>
                                <a href="{{bookmark.url}}">{{bookmark.url}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
        </article>
        <script type="text/javascript" src="scripts/angular.min.js"></script>
        <script type="text/javascript" src="scripts/main.js"></script>
    </body>
</html>

和我的 Angular 代码:

(function() {

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

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

        $http({ method: 'POST', url: 'data/bookmarks.json' }).success(function (data) {
            console.log('hello');
            $scope.bookmarks = data; // response data 
        }).
        error(function (data) {
            console.log(data);
        });
    });

})();

有什么地方出错了吗?谢谢。

最佳答案

尝试将 POST 更改为 GET

同时修复 ng-repeat 中的问题

使用

<li ng-repeat="bookmark in bookmarks" class="">

的地方
<li ng-repeat="bookmark in bookmarksCtrl.bookmarks" class="">

关于javascript - 如何使用angularjs在html页面上显示json数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24552242/

相关文章:

javascript - Canvas :在绘制的图像和剪辑之间插入渐变矩形

javascript - 使用 jquery 平滑滚动

javascript - Angular $watch 输入邮件

angularjs - ng-click 中的 Angular 插值范围变量

javascript - 动态更改 ng-repeat 元素的宽度

Javascript - 逐行读取文本文件。使用什么浏览器有关系吗?

javascript - 如何在不使用 document.writes 的情况下在 document.getelementById 函数中编写 for 循环

java - 解码为 POJO 时出现 JSON 关键大小写敏感问题

c# - 如何序列化用 [ScriptIgnore] 属性装饰的属性?

java - 如何正确地将 json 转换为对象,其中键实际上是一个变化的值?