Javascript AngularJS输入字段在提交后显示[object]

我已经开发了一个AngularJS天气应用程序，唯一需要解决的问题就是我的输入元素。提交值后，输入值将替换为“[object]”。我已经通读了几个问题，到目前为止还没有找到任何能帮助我解决这个问题的方法。所以我求助于你们，希望你们能帮助我

表格和输入如下：

<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>

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
    }
});
}]);

添加

具有getCity（city）功能的控制器如下：

<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>

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
    }
});
}]);

app.controller（'MainController'，['$scope'，'forecast'，'$http'，函数（$scope，forecast，$http）{
预测。成功（功能（数据）{
$scope.forecast=data.list；
});
$scope.removeCity=函数（索引）{
$scope.forecast.splice（指数1）；
urlCityList.splice（索引，1）；
setItem（'myCities'，JSON.stringify（urlCityList））；
};
$scope.getCity=函数（城市）{
log（'getCity（）调用时使用：'+city）；
var thisCity=$scope.city；
//构造URL
var url1='1〕http://api.openweathermap.org/data/2.5/weather?q=';
变量url2='&units=metric&APPID=f96088515ba4137e85db097513d9d8ab'；
var getCityUrl=url1+$scope.city+url2；
$http.get（getCityUrl）
.成功（功能（数据）{
$scope.city=数据；
var newCity={
“城市”：$scope.city.name，
“国家”：$scope.city.sys.country，
“id”：$scope.city.id
}
var getCorrectCity=newCity.city.toUpperCase（）==city.toUpperCase（）；
var avoidDuplicate=真；
var noDuplicate=true；
对于（i=0；i

该应用程序是实时的，问题可以在这里看到：jhalland.dk/weather

---

提前感谢

问题是您在

成功

响应中将

数据

对象保存到

$scope.city

---

如果您想在

$scope.city

中输入城市名称，请另存为

$scope.city=data.name

修改我认为正在发生的事情

.success(function(data){
      // $scope.city = data; - causes [object Object]
      var newCity = {
           "city": data.name,
           "country":data.sys.country,
           "id":data.id
      }
...
})

在

MainController

的第19行中，您已将

$scope.city

设置为

对象，而不是
字符串。由于HTML无法在
输入中显示对象的值，因此它显示的是
对象

如果您更改-：

从

到

或

它应该很好用

$scope.city = data.name;