AngularJS $ http請求不起作用

Question

我是AngularJS的新手，我正在嘗試使用涉及$ http服務的Angular依賴項注入。 我在與html文件相同的目錄中有一個.json文件，並且我在控制器中引用該文件。 但是，由於某些原因，視圖不會更改以顯示我的數據。 我究竟做錯了什么？ 每次我都會收到錯誤警報，但我不知道我在做什么。 任何幫助，將不勝感激。

index.html

<body ng-app="family" ng-controller="famctrl">
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            Search: <input ng-model="query">
        </div>

        <div class="col-md-10"><br>
            Sort by:
            <select ng-model="order">
                <option value="name">Alphabetical</option>
                <option value="age">Age</option>
            </select>
            <ul>
                <li ng-repeat="sword in swords | filter:query| orderBy:order"><span>{{sword.name}}</span>
                    <p>{{sword.quanity}}</p>
                    <p>{{sword.price}}</p>
                </li>
            </ul>

            <p>Total number of swords: {{swords.length}}</p>
        </div>
    </div>
</div>

family.js

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

family.controller('famctrl', function($scope, $http) {
    $http.get('records.json').success(function(data){
        $scope.swords=data;
    }).
    error(function(data){
        alert('error');
    });
    $scope.order="name";
});

records.json具有以下格式：

[
    {
        "name": "...",
        "quantity": "...",
        "price": "..."
    },...
]

Answer 1

也許試試這個！

family.controller('famctrl', ['$scope', '$http', function($scope, $http) {
    $http.get('records.json').success(function(data){
        $scope.swords=data;
    }).
    error(function(data){
        alert('error');
    });
    $scope.order="name";
}]);

Answer 2

您必須這樣定義：'$ scope'，'$ http'是負載控制器作用域和http

family.controller('famctrl', ['$scope', '$http', function($scope, $http) {
$http.get('records.json').success(function(data){
    $scope.swords=data;
}).
error(function(data){
    alert('error');
});
$scope.order="name";

}]）;

AngularJS $ http請求不起作用

問題描述

2 個解決方案

解決方案1
0 2015-12-21 04:18:20

解決方案2
0 2015-12-21 04:30:49

AngularJS $ http請求不起作用

問題描述

2 個解決方案

解決方案1 0 2015-12-21 04:18:20

解決方案2 0 2015-12-21 04:30:49

解決方案1
0 2015-12-21 04:18:20

解決方案2
0 2015-12-21 04:30:49