I have done this HTML for weather search by inputCity and when it returns an array, I want to give people a choice to choose from a list:
<form class="form-container" ng-submit="submitForm(inputCity)">
<input class="input-field" type="text" ng-model="inputCity" placeholder="City">
<input class="button-style" type="submit" value="Show Weather">
</form>
<table class="cities-table" ng-if="isArray">
<tr ng-repeat="data in cityArray" ng-click="inputCity=='zmw:{{data.zmw}}'">
<td>{{data.city}} in {{data.country_name}}</td>
</tr>
</table>
My js file:
.controller('WeatherController', [
'$scope',
'Weather',
function($scope, Weather) {
/* TODO: implement */
$scope.weatherData = [];
$scope.submitForm = function(inputCity){
Weather.getWeather(inputCity).success(function(data){
$scope.isArray = angular.isArray(data.response.results);
$scope.cityArray = data.response.results;
and the link in factory:
getWeather : function(inputCity) {
return $http({
url: 'http://api.wunderground.com/api/KEY/conditions/q/' + inputCity + '.json',
method: 'GET'
})
}
When array comes, can I do that on ng-click it chooses a city name (person can use zmw:{{data.zmw}} instead of inputCity or real city name in search field as that info comes with array) and send an AJAX request?
Making it more clear:
I have made a form with input (where should be written city name) and a search button. When Button is clicked weather information appears below. But when person types in a city, which is not the only one with the same name in the world, like for San Francisco (there is 10 of them - in Argentina, US and so on), then weather API returns array of all possible cities instead of weather information. I made it to that point, where if array is returned, it displays all the cities that API returned. What I want to do now is when person clicks on one of the displayed city, ng-click triggers the same AJAX call but with good search input ( zmw:{{data.zmw}} works fine ). Maybe I should do antoher function for that, but then it shows some errors?
