When using the code with the openweather api data, I can display low and high temperatures perfectly by declaring the city value in the input field (ex: value ="houston").
However, I want to create a function that captures the value I enter and displays the data when I press the enter key.
This way, I can view the data of any city I choose. Below is my code, which works fine if I don't include the enterkey function inside ng-keydown and manually declare a value instead. The issue might be the way I implemented the enterkey function in the JavaScript file.
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>