CODEWITHSUNDEEP
angularjs
Victor S
Victor S

Reputation: 25

ng-click api search with AngularjS

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'});
}]);

Upvotes: 1

Views: 1280

Answers (2)

manzapanza
manzapanza

Reputation: 6215

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);
    });
  };

});

Upvotes: 1

Lee
Lee

Reputation: 3101

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

Upvotes: 1

Related Questions