如何使用angularjs在html頁面上顯示json數據？

Question

我正在嘗試創建一個小角度，它接受一個json文件並在html頁面上顯示數據。 但是我收到以下錯誤：POST書簽/ data / bookmarks.json 405（方法不允許）。

這是我的代碼：

<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>

和我的角度代碼：

(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);
        });
    });

})();

我出錯的任何想法？ 謝謝。

Answer 1

嘗試將POST更改為GET 。

還修復了ng-repeat中的問題

采用

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

在...的地方

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

Answer 2

如果不允許POST ，請嘗試GET ，如果必須使用POST，則需要更改后端以允許發布請求

$http({ method: 'POST', url: 'data/bookmarks.json' }).success(function (data) {

如何使用angularjs在html頁面上顯示json數據？

問題描述

2 個解決方案

解決方案1
2 2014-07-03 11:27:32

解決方案2
0 2014-07-03 11:23:52

如何使用angularjs在html頁面上顯示json數據？

問題描述

2 個解決方案

解決方案1 2 2014-07-03 11:27:32

解決方案2 0 2014-07-03 11:23:52

解決方案1
2 2014-07-03 11:27:32

解決方案2
0 2014-07-03 11:23:52