Как получить результаты с angular.js $http?

Question

У меня проблемы с получением результатов от моего сервера API с angularjs.

Это мой код:

home.html (просмотр)

<div class="jumbotron text-center">
        <h1>Home Page</h1>

        <p>{{ message }}</p>

        <a href="#" ng-click="getOrders()">Orders!</a>
</div>
<ul>
    <li ng-repeat="order in orders">{{order}}</li>
</ul>

main.js (контроллер)

app.controller('mainController', function($scope, $http) {
    $scope.message = 'Everyone come and see how good I look!';
    $scope.orders = [];
    $scope.getOrders = function(){
        $http.get('http://apidemo.dev/api/orders').success(function(response){
            console.log("My data: " + response);
            $scope.orders = response;
        });
    }
});

Когда я нажимаю кнопку, я вижу результаты в консоли, но не в списке.

Если использовать этот код в контроллере, он работает, когда он загружается, и когда я нажимаю кнопку:

app.controller('mainController', function($scope, $http) {
    $scope.message = 'Everyone come and see how good I look!';
    $http.get('http://apidemo.dev/api/orders').success(function(response){
        console.log("My data: " + response);
        $scope.orders = response;
    });
    $scope.getOrders = function(){
        $http.get('http://apidemo.dev/api/orders').success(function(response){
            console.log("My data: " + response);
            $scope.orders = response;
        });
    }
});

В чем проблема?

Спасибо!

Answer 1

Похоже, вы использовали ngRoute и у тебя есть href="#" в вашем якоре, который приводит вас к перенаправлению на пустую страницу, сохранить href="" поможет вам в css показать pointer: cursor; при этом

кнопка

<a href="" ng-click="getOrders()">Orders!</a>

Answer 2

Спасибо всем за вашу помощь.

Проблема была ссылка в представлении...

<a href="#" ng-click="getOrders()">Orders!</a>

было бы:

<a ng-click="getOrders()">Orders!</a>