Как отправить данные со входа в службу?

Question

У меня возникла проблема с отправкой формы данных в службу. Например, у меня есть вход:

<input type="text" class="form-control" placeholder="City name..."> 
<span class="input-group-btn"> 
     <button class="btn btn-default" type="button">Go!</button> 
</span> 

И сервис, который Geting данные для отдыха API:

app.factory('forecast', ['$http', function($http) { 
    return $http.get('http://api.openweathermap.org/data/2.5/forecast/city?q=Warsaw&units=metric&mo') 
      .success(function(data) { 
       return data; 
      }) 
      .error(function(err) { 
       return err; 
      }); 
}]); 

Как я могу отправить название города от входа после нажатия кнопки «Go» в построить мою собственную ссылку api? А затем отобразить эти данные? Я имею в виду что-то вроде этого http://api.openweathermap.org/data/2.5/forecast/city?q=VALUE_FROM_THE_INPUT&units=metric&mo

Answer 1

Вы должны назначить ваш вход ng-model директива, как это:

<input type="text" class="form-control" placeholder="City name..." ng-model="city.name"> 

назначьте кнопку со ng-click директивы, например:

<button class="btn btn-default" type="button" ng-click="getForecast(city)">Go!</button> 

Наконец, добавьте getForecast функцию к вашему контроллер, например:

$scope.getForecast = function (city) { 
    forecast.getForecast($scope.city).then(function (data) { 
     // do something with the response 
    }, function (err) { 
     // do something about the error 
    }); 
} 

Для этой работы вы должны изменить свой сервис на что-то вроде этого:

app.factory('forecast', ['$http', function($http) { 
    return { 
     getForcast: function (city) { 
      $http.get('http://api.openweathermap.org/data/2.5/forecast/city?q=' + city.name + '&units=metric&mo'); 
     } 
    }; 
}]); 

Answer 2

ваш HTML:

<input type="text" class="form-control" placeholder="City name..." ng-model="city"> 
<span class="input-group-btn"> 
     <button class="btn btn-default" type="button" ng-click="go()">Go!</button> 
</span> 

ваш завод:

app.factory('forecast', ['$http', function($http) { 

    this.sendAPIRequest = function(city){ 
      $http.get('http://api.openweathermap.org/data/2.5/forecast/city?q='+city+'&units=metric&mo') 
       .success(function(data) { 
        return data; 
       }) 
       .error(function(err) { 
        return err; 
       }); 
     }; 

    return this; 
}]); 

ваш контроллер:

app.controller('myCtrl', ['$scope', 'forecast', function ($scope, forecast) { 
    $scope.go = function(){ 
     $scope.data = forecast.sendAPIRequest($scope.city); 
    }; 
}]) 

Answer 3

Вы, кажется, задать несколько вопросов, но позволяет просто начать с «GO», чтобы связать использование ввода. так как вы используете угловой завод вы можете использовать контроллер или что-то:

HTML:

<div ng-controller="formCtrl"> 
    <input type="text" class="form-control" placeholder="City name..." ng-model="city"> 
    <span class="input-group-btn"> 
      <button class="btn btn-default" type="button" ng-click="goToUrl(city)">Go!</button> 
    </span> 
</div> 

теперь вы хотите передать этот город с названием URL?

app.factory('forecast', ['$http', function($http) { 
    var forecastFactory = {}; 
    forcastFactory.customUrl = function(city){ 
     $http.get('http://api.openweathermap.org/data/2.5/forecast/city?' + city +'q=Warsaw&units=metric&mo') 
      .success(function(data) { 
       return data; 
      }) 
      .error(function(err) { 
       return err; 
      }); 
    } 
    return forecastFactory; 
}]); 

app.controller('formCtrl', ['forecast', function(Forecast){ 
    $scope.goToUrl = function(name){ 
     var data = Forecast.customUrl(name); 
    } 
}]);