Переменная области AngularJS $ устанавливается только один раз через HTTP GET

У меня есть API, который я пытаюсь получить из отдельного приложения AngularJS.

Существует кнопка, которую я использую для загрузки данных из API. При нажатии он вызывает функцию $scope.getApiData, которая привязана к переменной с именем $scope.productlist. Каждая запись имеет кнопку удаления, которая вызывает функцию $scope.deleteProduct.

API-интерфейс работает нормально, хотя это с помощью ASP.NET 5.

код вызывается, когда «Update» нажимается также называется после «Удалить» нажмите.

(function() { 
'use strict'; 

angular 
    .module('app') 
    .controller('Products', main); 

main.$inject = ['$scope', '$http']; 

function main($scope, $http) { 
    $scope.productlist = []; 

    // Get products from API 
    $scope.getApiData = function() { 
     $http({ 
      method: 'GET', 
      url: "http://localhost:65040/api/products", 
     }).then(function successCallback(response) { 
      $scope.productlist = response.data; 
     }, function errorCallback(response) { 
      alert('Error'); 
     }); 
    }; 

    // Delete a product 
    $scope.deleteProduct = function (idx) { 
     $http({ 
      method: 'DELETE', 
      url: "http://localhost:65040/api/products", 
      params: { 'id': idx }, 
     }).then(function successCallback(response) { 
      $scope.getApiData(); 
     }); 
    }; 

} 

})();

Однако, когда $scope.getApiData называется второй раз - либо вручную, либо путем удаления элемента - это не правильно обновить список, чтобы отразить состояние API, даже если правильные результаты возвращается в ответе HTTP. Список остается тем же, и все приложение необходимо перезапустить, чтобы он отражал данные в API.

HTML:

<table> 
    <tr> 
     <td>ID</td> 
     <td>Item Name</td> 
     <td>Price</td> 
    </tr> 
    <tr ng-repeat="product in productlist"> 
     <td>{{product.Id}}</td> 
     <td>{{product.Name}}</td> 
     <td>{{product.Price}}</td> 
     <td><button ng-click="deleteProduct(product.Id)">X</button></td> 
    </tr> 
</table> 

<button ng-click="getApiData()">Update</button> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="app/app.module.js"></script> 
<script src="app/main.js"></script>

Имея проблемы с вычислением это. Спасибо за прочтение!

источник

2015-12-03 Callum Evans

Опубликовать html-код – Vivek

Спасибо за напоминание. –

Почему вы не просто удаляете элемент из массива, если обратный вызов является успешным и не поддерживает независимость от внешнего интерфейса? – andresmijares25

Оказалось, что запрос был кеширован. Я не знаю, насколько это красиво, но добавив уникальный параметр в запрос, отсортировал его. Я обнаружил, что решение здесь: Angular IE Caching issue for $http

Так что мой запрос теперь выглядит

// Get products from API 
    $scope.getApiData = function() { 
     $http({ 
      method: 'GET', 
      url: "http://localhost:65040/api/products", 
      params: { 'foobar' : new Date().getTime() } 
     }).then(function successCallback(response) { 
      $scope.productlist = response.data; 
     }, function errorCallback(response) { 
      alert('Error'); 
     }); 
    };

, который работает, как я хотел.

источник

2015-12-03 16:09:52

Вы должны поместить свои скрипты в тег head, а не в тег body.

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Products</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="app/app.module.js"></script> 
    <script src="app/main.js"></script> 
</head> 
<body ng-controller="Products"> 
    <table> 
     <tr> 
      <td>ID</td> 
      <td>Item Name</td> 
      <td>Price</td> 
     </tr> 
     <tr ng-repeat="product in productlist"> 
      <td>{{product.Id}}</td> 
      <td>{{product.Name}}</td> 
      <td>{{product.Price}}</td> 
      <td><button ng-click="deleteProduct(product.Id)">X</button></td> 
     </tr> 
    </table> 

    <button ng-click="getApiData()">Update</button> 

</body> 
</html>

источник

2015-12-03 15:45:41 Vivek

Это не решило бы проблему здесь, и, наконец, я слышал, что есть смешанные мнения о том, где файлы сценариев должны идти в любом случае. –

Переменная области AngularJS $ устанавливается только один раз через HTTP GET

ответ

Смежные вопросы