我正在尝试做同样的事情:How to send data from input to service?,我确实复制/粘贴了每个提供的解决方案,但我无法使其成功。 这是我的出发点,当我编写这样的代码时,它工作正常:
var town="London";
//factory
scotchApp.factory('forecastBG', ['$http', function($http) {
return $http.get('http://api.openweathermap.org/data/2.5/find?q=' + town + '&units=metric&appid=bd82977b86bf27fb59a04b61b657fb6f')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
//controller
scotchApp.controller('beograd', ['$scope', 'forecastBG', function($scope, forecastBG) {
forecastBG.success(function(data) {
$scope.fiveDay = data;
});
}]);
//view
<div class="forecast">
<div ng-controller="beograd" class="first">
<p></p>
<p style="font-size: 130%"> City </p>
<p style="font-size: 130%">{{ fiveDay['list'][0].main.temp }}°C</p>
<p> Wind: {{ fiveDay['list'][0].wind.speed }} m/s</p>
<p> Pressure: {{ fiveDay['list'][0].main.pressure }}hpa</p>
<p> Humidity: {{ fiveDay['list'][0].main.humidity }}%</p>
<p style="font-size: 90%"> Min. temp.: {{ fiveDay['list'][0].main.temp_min }}°C</p>
<p style="font-size: 90%"> Max. temp.: {{ fiveDay['list'][0].main.temp_max }}°C</p>
<p style="font-size: 90%"> {{ fiveDay['list'][0]['weather'][0].description }}</p>
</div>
</div>
现在,我正在尝试一种方法从输入字段获取值,将该值传递到var town,然后使用新信息刷新视图,只需单击一下按钮。我们的想法是让用户可以搜索并获取此API上任何可用城市的信息。 请帮忙,我会努力做到这一点,并且我对角度很新。
答案 0 :(得分:2)
一些部分 - 首先,您需要让工厂返回一个可调用函数,该函数将town
作为参数(也将使用.then
返回一个承诺):
scotchApp.factory('forecastBG', ['$http', function($http) {
return {
getWeatherForTown: function(town) {
return $http.get('http://api.openweathermap.org/data/2.5/find?q=' + town + '&units=metric&appid=bd82977b86bf27fb59a04b61b657fb6f')
.then(function(result) {
return result.data;
})
}
}
}]);
现在,创建一个控制器功能来处理您的点击事件并致电您的工厂:
$scope.getWeather = function(town) {
forecastBG.getWeatherForTown(town).then(function(data) {
$scope.fiveDay = data;
});
}
更新视图以调用此方法并传入input
模型:
<input type="text" ng-model="townToSearchFor" />
<button ng-click="getWeather(townToSearchFor)" ng-disabled="!townToSearchFor">Get Weather!</button>