如何将数据从输入发送到服务？答案

【问题标题】：How to send data from input to service?如何将数据从输入发送到服务？
【发布时间】：2015-08-29 00:02:06
【问题描述】：

我在向服务发送数据表单输入时遇到问题。例如我有一个输入：

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

还有一个正在为 rest 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

【问题讨论】：

标签： javascript angularjs html

【解决方案1】：

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

【讨论】：

【解决方案2】：

您似乎在问一些问题，但让我们从“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);
    }
}]);

【讨论】：

感谢您的快速回答，也许我做错了什么，但它对我不起作用，我将向您展示我的应用程序现在的样子。现在它只显示一个基于静态链接的城市，但我非常想做我之前写的，所以例如加载第一个静态城市 oraz 一些欢迎消息，然后用户搜索城市点击 go 并且这个城市的视图呈现在这里是视图：pastebin.com/dWa2fQRt 这里是工厂：pastebin.com/YPL4b79i 而她是控制者：pastebin.com/ZyqZttdw

【解决方案3】：

您应该为您的输入分配一个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'); 
       }
   };
}]);

【讨论】：