Javascript 角度js，天气api搜索城市并使用回车键

因此，代码允许我使用OpenWeatherAPI数据显示低温和高温。 如果我在输入中声明城市的值（ex:value=“houston”），我可以完美地看到数据

但是我想要一个函数，它接受我输入的值，当我按下enter键时，数据就会显示出来

这样我可以看到我选择的任何城市的数据。 下面是我的代码，如果我不在ng keydown中使用enterkey函数，而是声明一个值，那么它将运行得非常完美。所以它必须是我在js文件中使用enterkey函数的方式

var-app=angular.module（'myapp'，[]）；
app.controller（'DemoCtrl'，函数（$http）{
var ctrl=this；
var URL='1〕http://api.openweathermap.org/data/2.5/forecast/daily';
var city=document.getElementById（“搜索框”）.value；
var请求={
方法：“GET”，
url:url，
参数：{
问：城市，
模式：“json”，
单位：'帝国'，
政务司司长:"7",，
应用ID:'d20b7e069e7858118979c0ed0b36f8b5'
}
}
函数enterkey（）{
var enterk=event.keyCode | | event.which；
如果（输入=13）{
$http（请求）
.然后（功能（响应）{
ctrl.data=response.data；
console.log（ctrl.data）；
})
}}
})

角JS
{{ctrl.data.list[0].temp.max | json}}

{{ctrl.data.list[0].temp.min | json}
{{ctrl.data.list[1].temp.max | json}}

{{ctrl.data.list[1].temp.min | json}
{{ctrl.data.list[2].temp.max | json}}

{{ctrl.data.list[2].temp.min | json}
{{ctrl.data.list[3].temp.max | json}}

{{ctrl.data.list[3].temp.min | json}
{{ctrl.data.list[4].temp.max | json}}

{{ctrl.data.list[4].temp.min | json}
{{ctrl.data.list[5].temp.max | json}}

{{ctrl.data.list[5].temp.min | json}
{{ctrl.data.list[6].temp.max | json}}

{{ctrl.data.list[6].temp.min | json}

使用回车键不需要任何额外的东西。只需在表单中包含一个提交输入即可。然后按下enter键时，使用

ng submit

显示详细信息。此外，从视图调用的函数需要附加到

$scope

。对于angular，您不需要在控制器中使用DOM函数，而是使用

ng model

HTML

---

我还没有测试过它，但你应该明白了。

因此，在从成员那里得到建议后，我能够通过ng模型将输入值与城市值联系起来，这将创建一个双向数据绑定。我还必须手动使用$watch来查找输入值的更改，并在键入城市名称时重新运行函数来动态更改数据。如果有人发现任何其他更好、有效或推荐的方法。请随意评论

var-app=angular.module（'myapp'，[]）；
app.controller（'DemoCtrl'，函数（$http，$scope）{
var ctrl=this；
var URL='1〕http://api.openweathermap.org/data/2.5/forecast/daily';
//var cityName=document.getElementById（“搜索框”）.value；
$scope.request={
方法：“GET”，
url:url，
参数：{
问：伦敦，
模式：“json”，
单位：'帝国'，
政务司司长:"7",，
应用ID:'d20b7e069e7858118979c0ed0b36f8b5'
}
}
功能测试（）{
$http（$scope.request）
.然后（功能（响应）{
ctrl.data=response.data；
console.log（ctrl.data）；
})
}
test（）；
$scope.$watch（'request.params.q'，function（）{
test（）；
})
})

角JS
{{
{{ctrl.data.list[0].temp.max | json}}

{{ctrl.data.list[0].temp.min | json}
{{ctrl.data.list[1].temp.max | json}}

{{ctrl.data.list[1].temp.min | json}
{{ctrl.data.list[2].temp.max | json}}

{{ctrl.data.list[2].temp.min | json}
{{ctrl.data.list[3].temp.max | json}}

{{ctrl.data.list[3].temp.min | json}
{{ctrl.data.list[4].temp.max | json}}

{{ctrl.data.list[4].temp.min | json}
{{ctrl.data.list[5].temp.max | json}}

{{ctrl.data.list[5].temp.min | json}
{{ctrl.data.list[6].temp.max | json}}

{{ctrl.data.list[6].temp.min | json}
}}

角度控制器中不应存在任何dom代码。只需使用

ng model

即可将其删除。始终首先考虑数据模型和绑定方法，而不是domfirst@charlietfl：是的，你说得对，我刚刚扩展了OP的代码。我会编辑它并提出建议。我尝试了ng模型，就像上面的代码“q:ctrl.cityName”一样，但是cityName是“未定义的”。我制作了$scope.cityName=cityName；然后问：cityName，但得到“未定义”

<form action="" method="get" ng-submit="submitForm()">
  <input ng-model="cityName" type="text" id="search_box" placeholder="Enter City Name Here..">
  <input type="submit" style="display:none"/>
</form>

app.controller('DemoCtrl', function($http) {

    var ctrl = this;

    var URL = 'http://api.openweathermap.org...';
    var request = {
        method: 'GET',
        url: URL,
        params: {
            //use ng-model instead of getElementById
            q: ctrl.cityName, 
            mode: 'json',
            ...
        }
    }

    ctrl.submitForm = function() {
        $http(request)
            .then(function (response) {
                ctrl.data = response.data;
                console.log(ctrl.data);
            })
    }
})