gpt4 book ai didi

javascript - angular js按时间间隔更新json并更新 View

转载 作者:数据小太阳 更新时间:2023-10-29 05:10:18 27 4
gpt4 key购买 nike

我一直在尝试在 Internet 上找到一种解决方案,以便能够在设定的时间间隔内更新我的 $http json 请求,同时让它用新数据更新我的绑定(bind)。

我看过一些使用 $timeout 的示例,但无法使其正常工作,只是想知道最好的方法是什么。此外,能够使用下拉的新数据更新 View 是我似乎无法解决的问题,因为我无法提出新请求。

这是我当前的构建。

app.js 文件,这仅显示 json 的初始提取。

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

myApp.controller('MainCtrl', ['$scope', '$http',
function($scope, $http, $timeout) {
$scope.Days = {};

$http({
method: 'GET',
url: "data.json"
})
.success(function(data, status, headers, config) {
$scope.Days = data;
})
.error(function(data, status, headers, config) {
// something went wrong :(
});

}
]);

HTML 设置:

<ul ng-controller="MainCtrl">
<li class="date" ng-repeat-start="day in Days">
<strong>>{{ day.Date }}</strong>
</li>

<li class="item" ng-repeat-end ng-repeat="item in day.Items">
<strong>>{{ item.Name }}</strong>
</li>
</ul>

最佳答案

我会使用 $timeout

如您所知,$timeout 返回 promise 。因此,当 promise 被解析时,我们可以再次调用方法 myLoop

在下面的示例中,我们每 10 秒调用一次 http。

var timer;

function myLoop() {
// When the timeout is defined, it returns a
// promise object.
timer = $timeout(function () {
console.log("Timeout executed", Date.now());
}, 10000);

timer.then(function () {
console.log("Timer resolved!");

$http({
method: 'GET',
url: "data.json"
}).success(function (data, status, headers, config) {
$scope.Days = data;
myLoop();
}).error(function (data, status, headers, config) {
// something went wrong :(
});
}, function () {
console.log("Timer rejected!");
});

}

myLoop();

作为旁注:

当 Controller 被销毁时一定要调用$timeout.cancel( timer );

// When the DOM element is removed from the page,
// AngularJS will trigger the $destroy event on
// the scope.
// Cancel timeout
$scope.$on("$destroy", function (event) {
$timeout.cancel(timer);
});

演示 Fiddle

关于javascript - angular js按时间间隔更新json并更新 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23181616/

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