因此代码允许我使用openweather api数据显示低温和高温。 如果我在输入中声明城市的价值，我可以完美地看到数据（例如：值=＆＃34;休斯顿＆＃34;）
但是我想要一个获取我输入的值的函数，当我点击回车键时，显示数据。
这样我可以看到我选择的任何城市的数据。 下面是我的代码，如果我不使用ng-keydown中的enterkey函数并且声明一个值，则运行完美。所以它必须我在js文件中使用enterkey函数的方式。
var app = angular.module('myapp', []);
app.controller('DemoCtrl', function($http) {
var ctrl = this;
var URL = 'http://api.openweathermap.org/data/2.5/forecast/daily';
var city = document.getElementById("search_box").value;
var request = {
method: 'GET',
url: URL,
params: {
q: city,
mode: 'json',
units: 'imperial',
cnt: '7',
appid: 'd20b7e069e7858118979c0ed0b36f8b5'
}
}
function enterkey() {
var enterk = event.keyCode || event.which;
if (enterk == 13) {
$http(request)
.then(function (response) {
ctrl.data = response.data;
console.log(ctrl.data);
})
}}
})
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/weatherangu.css">
<meta charset="utf-8">
<title>Angular JS</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
</head>
<body ng-app="myapp">
<div id="content" ng-controller="DemoCtrl as ctrl">
<img id="w_pic" src="../images/7day.png">
<input type="text" id="search_box" placeholder="Enter City Name Here.." ng-keydown="enterkey()">
<div id="weather_data">
<h1 class="zero">{{ ctrl.data.list[0].temp.max| json }}</h1><br>
<h1 class="zero">{{ ctrl.data.list[0].temp.min| json }}</h1>
<h1 class="one">{{ ctrl.data.list[1].temp.max| json }}</h1><br>
<h1 class="one">{{ ctrl.data.list[1].temp.min| json }}</h1>
<h1 class="two">{{ ctrl.data.list[2].temp.max| json }}</h1><br>
<h1 class="two">{{ ctrl.data.list[2].temp.min| json }}</h1>
<h1 class="three">{{ ctrl.data.list[3].temp.max| json }}</h1><br>
<h1 class="three">{{ ctrl.data.list[3].temp.min| json }}</h1>
<h1 class="four">{{ ctrl.data.list[4].temp.max| json }}</h1><br>
<h1 class="four">{{ ctrl.data.list[4].temp.min| json }}</h1>
<h1 class="five">{{ ctrl.data.list[5].temp.max| json }}</h1><br>
<h1 class="five">{{ ctrl.data.list[5].temp.min| json }}</h1>
<h1 class="six">{{ ctrl.data.list[6].temp.max| json }}</h1><br>
<h1 class="six">{{ ctrl.data.list[6].temp.min| json }}</h1>
</div>
</div>
<script src = "../js/weatherangu.js"></script>
</body>
</html>
答案 0 :(得分：0)
使用回车键不需要任何额外费用。只需将输入包含在带有提交输入的表单中。然后使用ng-submit显示按下回车键时的详细信息。此外，您从视图中调用的函数需要附加到$scope。使用angular，您不需要在控制器中使用DOM函数，而是使用ng-model。
<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);
})
}
})
我还没有测试过，但你应该明白这个想法。
答案 1 :(得分：0)
因此，在从成员获得建议后，我能够通过ng-model将输入值连接到城市的值，这将创建双向数据绑定。我还必须手动使用$ watch来查找输入值更改并重新运行该函数以在我输入城市名称时动态更改数据。如果有人发现任何其他更好，更有效或推荐的方法。请随时发表评论。
var app = angular.module('myapp', []);
app.controller('DemoCtrl', function($http,$scope) {
var ctrl = this;
var URL = 'http://api.openweathermap.org/data/2.5/forecast/daily';
//var cityName = document.getElementById("search_box").value;
$scope.request = {
method: 'GET',
url: URL,
params: {
q: 'london',
mode: 'json',
units: 'imperial',
cnt: '7',
appid: 'd20b7e069e7858118979c0ed0b36f8b5'
}
}
function test() {
$http($scope.request)
.then(function (response) {
ctrl.data = response.data;
console.log(ctrl.data);
})
}
test();
$scope.$watch('request.params.q',function () {
test();
})
})<!--<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="../css/weatherangu.css">
<title></title>
</head>
<body ng-app="wapp">
<input type="text" id="searchbox" placeholder="Type City Name Here.." onkeydown="enterkey()" >
<div id="posterdiv" ng-controller = "ctrl as vm">
<p> {{vm.data | json}}</p>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src = "../JavaScript/weatherangu.js"></script>
</body>
</html>-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/weatherangu.css">
<meta charset="utf-8">
<title>Angular JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div id="content" ng-controller="DemoCtrl as ctrl">
<img id="w_pic" src="../images/7day.png">
<!--<form action="" method="get" ng-submit="submitform()">- -->
<!--<input type="text" ng-model="$ctrl.request.params.q" id="search_box" placeholder="Enter City Name Here..">-->
<!--<input type="submit" style="display:none"/>-->
<!--</form>-->
<input type="text" ng-model="request.params.q" id="search_box" placeholder="Enter City Name Here..">
<div id="weather_data">
{{
<h1 class="zero">{{ ctrl.data.list[0].temp.max| json }}</h1><br>
<h1 class="zero">{{ ctrl.data.list[0].temp.min| json }}</h1>
<h1 class="one">{{ ctrl.data.list[1].temp.max| json }}</h1><br>
<h1 class="one">{{ ctrl.data.list[1].temp.min| json }}</h1>
<h1 class="two">{{ ctrl.data.list[2].temp.max| json }}</h1><br>
<h1 class="two">{{ ctrl.data.list[2].temp.min| json }}</h1>
<h1 class="three">{{ ctrl.data.list[3].temp.max| json }}</h1><br>
<h1 class="three">{{ ctrl.data.list[3].temp.min| json }}</h1>
<h1 class="four">{{ ctrl.data.list[4].temp.max| json }}</h1><br>
<h1 class="four">{{ ctrl.data.list[4].temp.min| json }}</h1>
<h1 class="five">{{ ctrl.data.list[5].temp.max| json }}</h1><br>
<h1 class="five">{{ ctrl.data.list[5].temp.min| json }}</h1>
<h1 class="six">{{ ctrl.data.list[6].temp.max| json }}</h1><br>
<h1 class="six">{{ ctrl.data.list[6].temp.min| json }}</h1>
}}
</div>
</div>
<script src = "../js/weatherangu.js"></script>
</body>
</html>