ng-click api search with AngularjS

Question

I wonder how to connect the search button to the input field.

controllers.js

  angular.module('weatherApp.controllers', [])
 .controller('weatherCtrl', function($scope, $http) {

     $http.jsonp('http://api.openweathermap.org/data/2.5/find?q=' + $scope.SearchCity + '&type=like&APPID=&callback=JSON_CALLBACK')             
         .success(function(data){
             console.log('success');
             $scope.cities = data;

     });

});

all.html

<input type="text" ng-model="SearchCity" placeholder="Search for city" />
<input type="submit" ng-click="Search" Value="Search" />

<tr ng-repeat="city in cities.list | limitTo: 10 | filter:SearchCity">
  <td>{{city.name}}</td>
</tr>

app.js

angular.module('weatherApp', ['weatherApp.controllers', 'ngRoute']).config(['$routeProvider', function($routeProvider){
    $routeProvider.when('/all', {templateUrl: 'templates/all.html', controller:'weatherCtrl'});
    $routeProvider.otherwise({redirectTo: '/all'});
}]);

manzapanza · Accepted Answer · 2015-11-03 17:58:07Z

1

Try something like this:

Controller:

.controller('weatherCtrl', function($scope, $http) {

  $scope.cities = [];

  $scope.callOpenWeatherMap = function(searchCity){
    $http.jsonp('http://api.openweathermap.org/data/2.5/find?q=' + searchCity + '&type=like&APPID=&callback=JSON_CALLBACK')
      .then(function(data){
        console.log('success', data);
        $scope.cities = data;
    }).catch(function(error){
        console.log('error', error);

    });
  };

});

HTML:

  <input type="text" ng-model="searchCity" placeholder="Search for city" />
  <input type="submit" ng-click="callOpenWeatherMap(searchCity)" Value="Search" />

  <tr ng-repeat="city in cities.list | limitTo: 10 | filter:searchCity">
    <td>{{city.name}}</td>
  </tr>

UPDATE

To improve your code you could create an OpenWeatherMap service where place all mathods/calls to the OpenWeatherMap api:

Service:

.service('OpenWetherMap', function($http){

  this.find = function(searchCity){
    return $http.jsonp('http://api.openweathermap.org/data/2.5/find?q=' + searchCity + '&type=like&APPID=&callback=JSON_CALLBACK');
  };

})

Controller:

.controller('weatherCtrl', function($scope, OpenWetherMap) {

  $scope.callOpenWeatherMap = function(searchCity){
    OpenWetherMap.find(searchCity).then(function(data){
      console.log('success', data);
      $scope.cities = data;
    }).catch(function(error){
      console.log('error', error);
    });
  };

});

edited Nov 3, 2015 at 17:58

answered Nov 3, 2015 at 17:47

manzapanza

6,2914 gold badges43 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Victor S Over a year ago

I get this in mozilla console: success Object { data: Object, status: 200, headers: headersGetter/<(), config: Object, statusText: "load" }. it doesnt list the cities im searching for though

manzapanza Over a year ago

Try changing this line to: console.log('success', data.data);

Lee · Accepted Answer · 2015-11-03 16:54:24Z

1

I might be misunderstanding what you're asking, but you should be able to wrap your jsonp call in a $scope.Search function?

answered Nov 3, 2015 at 16:54

Lee

3,1213 gold badges25 silver badges29 bronze badges

4 Comments

Victor S Over a year ago

I fairly new to coding and not sure what you mean with wrapping. For example, when I write stockholm in the search field I want to it to put the input data into the $scope.searchCity. But I still don't know how ng-click is working

Lee Over a year ago

$scope.Search = function () { $http.jsonp(...); }

Victor S Over a year ago

I've been struggleing with it since I don't know how to connect the button to my input field. That's what im looking for! :)

Lee Over a year ago

You are including SearchCity in your jsonp call. That is set with ng-model. Your ng-click should call Search as a function e.g. ng-click="Search()"

Collectives™ on Stack Overflow

ng-click api search with AngularjS

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related