[英]AngularJS, How to get the value from input and place it in a factory?
I am trying to do the exact same thing like this guy: How to send data from input to service? 我正在尝试像这个家伙一样做同样的事情: 如何将数据从输入发送到服务? ,and I did copy/paste every offered solution, but I couldnt manage to make it work. ,并且确实复制/粘贴了所有提供的解决方案,但是我无法使其正常运行。 Here is my starting point, when I write the code like this, it works fine: 这是我的起点,当我编写这样的代码时,它可以正常工作:
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>
Now, I am trying to think of a way to get the value from an input field, pass that value into var town, and then refresh the view with the new info, with a single button click. 现在,我正在尝试一种方法,可从输入字段中获取值,然后将该值传递给var town,然后单击一次按钮即可使用新信息刷新视图。 The idea is to make it possible for users to search and get the info for any city available on this API. 这样做的目的是使用户可以搜索并获取此API上可用的任何城市的信息。 Please help, I am gonna go nuts with trying to make this work, and I am very new to angular. 请帮忙,我将不遗余力地尝试完成这项工作,而且我对棱角也很陌生。
A few parts - first you need to make your factory return a callable function that takes town
as a param (also going to use .then
to return a promise): 有几部分-首先,您需要使工厂返回一个以town
作为参数的可调用函数(也将使用.then
返回一个Promise):
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;
})
}
}
}]);
Now, make a controller function to handle your click event and call your factory: 现在,创建一个控制器函数来处理您的click事件并致电工厂:
$scope.getWeather = function(town) {
forecastBG.getWeatherForTown(town).then(function(data) {
$scope.fiveDay = data;
});
}
And update the view to call this method and pass in your input
model: 并更新视图以调用此方法并传入您的input
模型:
<input type="text" ng-model="townToSearchFor" />
<button ng-click="getWeather(townToSearchFor)" ng-disabled="!townToSearchFor">Get Weather!</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.