gpt4 book ai didi

javascript - AngularJS 在 POST http 请求上更新模型/ View

转载 作者:行者123 更新时间:2023-12-03 08:11:51 25 4
gpt4 key购买 nike

我知道有很多类似的问题 - 我是 AngularJS 的新手,并且在数据绑定(bind)方面遇到困难。我已经使用本地模型和 Controller 完成了一些简单的示例,但现在尝试扩展到使用 REST 服务并从 Controller 中分离出服务。我觉得我应该在创建结束时更新我的​​模型 $forecastData 变量,以便将其绑定(bind)回屏幕,但我无法从服务访问。数据已从帖子中成功创建,如果我刷新浏览器,数据将正确显示 - 我只是希望此屏幕更新能够自动发生。

我的屏幕是这样的:

<!DOCTYPE html>
<html ng-app="MeterApp">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body class="container">
<div class="panel panel-primary" ng-controller="ForecastFormController" ng-init="getData()">
<div class="panel-heading">Forecast Data</div>
<div class="panel-body">
<table class="table table-bordered table-hover">
<tr>
<th>Forecast Date</th>
<th>Value (kWh)</th>
<tr ng-repeat="forecast in forecastData"">
<td>{{forecast.forecast_date}}</td>
<td>{{forecast.value_kwh}}</td>
</tr>
</table>
</div>
</div>
<div class="panel panel-primary col-lg-4" ng-controller="ForecastFormController">
<div class="panel-heading">Add Forecast</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="forecast-date">Forecast Date:</label>
<input class="form-control" id="forecast-date" ng-model="forecast.forecast_date">
<br>
<label for="forecast-value">Forecast Value (KwH):</label>
<input class="form-control" id="forecast-value" ng-model="forecast.value_kwh">
<br>
<button type="submit" class="btn btn-default" ng-click="create()">Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>

服务/ Controller 是:

app.service('forecastDataService', function($http) {

this.getData = function() {
return $http({
method: 'GET',
url: 'http://localhost:51437/api/forecasts'
});
}

this.addData = function(f){
return $http({
method: 'POST',
url: 'http://localhost:51437/api/forecasts',
});
}
});

app.controller('ForecastFormController', function($scope, forecastDataService) {

/* $scope.forecastData = [ {"id":1,"value_kwh":1000.0,"forecast_date":"2015-11-27T00:00:00"},{"id":2,"value_kwh":1000.0,"forecast_date":"2015-11-28T00:00:00"},{"id":4,"value_kwh":1000.0,"forecast_date":"2015-11-29T00:00:00"}]; */

$scope.forecastData = null;
$scope.foreast = {};

$scope.getData = function(){
forecastDataService.getData().then(function(dataResponse) {
$scope.forecastData = dataResponse.data;
console.dir($scope.forecastData);
return $scope.forecastData;
});
}

$scope.create = function(){
console.dir("Called create method with: " + $scope.forecast.value_kwh + ":" + $scope.forecast.forecast_date);
forecastDataService.addData($scope.forecast).then(function(dataResponse) {
console.dir("Success - data response: " + dataResponse.data);
});
}
})

最佳答案

您可以从服务返回一个对象,当您想要刷新数据时,只需调用刷新函数,例如:

app.service('forecastDataService', function($http) {
var data = {
forecast: {}
};
this.getData = function() {
return data;
}

this.refreshData = function(f){
$http({
method: 'POST',
url: 'http://localhost:51437/api/forecasts',
}).then(unction(dataResponse) {
data.forecast = dataResponse.data;
});
}
});

在 Controller 中使用服务:

$scope.forecastData = forecastDataService.getData();

从服务器获取最新数据并更新查看

forecastDataService.refreshData();

关于javascript - AngularJS 在 POST http 请求上更新模型/ View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34104275/

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