[英]AngularJS input field shows [object Object] after submit
I have developed a AngularJS weather application and the only problem i have left to solve has to do with my input element. 我已经开发了AngularJS天气应用程序,剩下要解决的唯一问题与我的输入元素有关。 After a value has been submitted, the input value is replaced with "[object Object]".
提交值后,将输入值替换为“ [object Object]”。 I have read through several questions and haven't come across anything that has helped me solve this problem thus far.
我已经阅读了几个问题,到目前为止还没有发现任何可以帮助我解决该问题的方法。 So I turn to you guys and hope you can assist me.
所以我转向你们,希望您能帮助我。
the form and input is as follows: 形式和输入如下:
<form name="add-city" ng-submit="getCity(city)">
<input id="user-city" type="text" name="user-city" placeholder="Search for a city" ng-model="city" ></input>
<button type="button" ng-click="getCity(city)">Add</button>
</form>
The controller with getCity(city) function is as follows: 具有getCity(city)功能的控制器如下:
app.controller('MainController', ['$scope','forecasts','$http', function($scope, forecasts, $http){
forecasts.success(function(data){
$scope.forecasts = data.list;
});
$scope.removeCity = function (index) {
$scope.forecasts.splice(index, 1);
urlCityList.splice(index, 1);
localStorage.setItem('myCities', JSON.stringify(urlCityList));
};
$scope.getCity = function(city) {
console.log('getCity() invoked with: '+city);
var thisCity=$scope.city;
// CONSTRUCT URL
var url1 = 'http://api.openweathermap.org/data/2.5/weather?q=';
var url2 = '&units=metric&APPID=f96088515ba4137e85db097513d9d8ab';
var getCityUrl = url1+$scope.city+url2;
$http.get(getCityUrl)
.success(function(data){
$scope.city = data;
var newCity = {
"city": $scope.city.name,
"country":$scope.city.sys.country,
"id":$scope.city.id
}
var getCorrectCity = newCity.city.toUpperCase() == city.toUpperCase();
var avoidDuplicate = true;
var noDuplicate = true;
for (i=0; i < urlCityList.length; i++) {
if (urlCityList[i].city.toUpperCase() == city.toUpperCase()) {
noDuplicate = false;
}
}
if (getCorrectCity == true && noDuplicate == true) {
urlCityList.push(newCity);
localStorage.setItem('myCities', JSON.stringify(urlCityList))
$scope.forecasts.push($scope.city);
}
})
.error(function(err){
return err;
});
console.log($('#addCity').val());
$('#addCity').val('');
};
$("#user-city").keyup(function (e) {
if (e.keyCode == 13) {
// Do something
}
});
}]);
the app is live and the issue can be seen here: jhalland.dk/weather 该应用程序已上线,可以在此处查看问题:jhalland.dk/weather
Thanks in advance 提前致谢
The problem is that you are saving data
object to $scope.city
in the success
response. 问题是您将
success
响应中的data
对象保存到$scope.city
。
If you want the name of the city inside $scope.city
save as $scope.city = data.name
如果要在
$scope.city
内输入城市名称, $scope.city
另存为$scope.city = data.name
Amended what I think is happening. 修改了我认为正在发生的事情。
.success(function(data){
// $scope.city = data; - causes [object Object]
var newCity = {
"city": data.name,
"country":data.sys.country,
"id":data.id
}
...
})
In line 19 of your MainController
, you have set $scope.city
to be an object
, rather than a string
. 在
MainController
第19行中,将$scope.city
设置$scope.city
object
,而不是string
。 Since your HTML can't show the object's value in an input
, it shows that it IS an object
instead. 由于您的HTML不能在
input
显示该对象的值,因此它表明它是一个object
。
If you change -: 如果您更改-:
From 从
$scope.city = data;
var newCity = {
"city": $scope.city.name,
"country":$scope.city.sys.country,
"id":$scope.city.id
}
To 至
var newCity = {
"city": data.name,
"country": data.sys.country,
"id": data.id
}
OR 要么
$scope.city = data.name;
It should work fine. 它应该工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.