gpt4 book ai didi

javascript - 使用 Angular 刷新 JSON 数据

转载 作者:行者123 更新时间:2023-11-29 14:48:29 26 4
gpt4 key购买 nike

刚刚完成了一个 Codeacademy 教程,使用 Angular 循环访问来自 URL 的一些 JSON 数据并显示数据。

很想知道如何实现它,以便在 JSON 数据定期更改时更新数据!

我知道我可能需要刷新 http get 请求,但在那之后我不确定。

如果有人能指出正确的方向,我将不胜感激!

谢谢!

服务/forecast.js

app.factory('forecast', ['$http', function($http) { 
return $http.get('http://json-time.appspot.com/time.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);

Controller /MinorController.js

app.controller('MinorController', ['$scope', 'forecast', function($scope, forecast) { 

var setTimeOut = setInterval(function () {
forecast.success(function(data) {
$scope.fiveDay = data;
});
}, 5000);

$scope.$on('$routeChangeStart', function (scope, next, current) {
if (next.$$route.controller != "MinorController") {
clearInterval(setTimeOut); // clear interval here
}
});
}]);

test.html( View )

 <!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Angular -->
<script src="js/shared/angular.min.js"></script>


<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="js/shared/bootstrap.min.js"></script>

</head>

<body ng-app="myApp">

<div class="container" ng-controller="MinorController">
<div class="row">
<h1>Time JSON Example</h1>
<h2>{{ fiveDay.tz }} </h2>
<h2> {{ fiveDay.hour }} </h2>
<h2> {{ fiveDay.datetime }} </h2>
<h2> {{fiveDay.second }} </h2>
</div>



</div>

<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<script src="js/controllers/MinorController.js"></script>

<!-- Services -->
<script src="js/services/forecast.js"></script>

</body>
</html>

最佳答案

您可以像这样使用 setInterval 来做到这一点。

app.controller('MinorController', ['$scope', 'forecast', function($scope, forecast) {
var setTimeOut = setInterval(function () {
forecast.success(function(data) {
$scope.fiveDay = data;
});
}, 5000);

$scope.$on('$routeChangeStart', function (scope, next, current) {
if (next.$$route.controller != "MinorController") {
clearInterval(setTimeOut); // clear interval here
}
});
}]);
  • 现在您的服务将每 5 秒调用一次并重新绑定(bind)您的对象。

  • 如果您转到另一个屏幕,则 routeChangeStart 事件将调用清除间隔。

关于javascript - 使用 Angular 刷新 JSON 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29603692/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com