Javascript AngularJS帮助：将搜索输入连接到REST接口

过去几天我一直在学习AngularJS，但是我被困在一个部分。我想做的是允许用户输入搜索（当然是在输入小部件中），我希望搜索连接到在线API（OpenWeatherAPI）并从在线提取JSON数据。然后我希望结果显示在网页中

我已经使用AngularJS完成了提取JSON数据的源代码。我只是停留在将搜索查询连接到API上。下面是提取REST API的源代码：

9 var app = angular.module('oMoonShine', []); 
10 

11 // Note: Controller To Access Weather Data From OpenWeatherAPI (Content Type: JSON)  
12 app.controller('FetchController', function ($scope, $http) { 
13     $http.get("http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139", request) 
14     .then(function (response) { 
15         if (response.status == 200) { 
16             // Note: Important To Print Your Response To Anaylse The JSON Recieved 
17             // Note: For Example OpenWeatherAPI Add Additional Param So Have it 
18             // Note: Like <code>$scope.info = response.data;</code> To Anaysle It 
19             $scope.info = response.data; 
20         } 
21     }); 
22 

23     // Note: Request Object For Extra Types 
24     var request = { 
25         headers: 'application/json', 
26         method: 'GET' 
27     }; 
28 }); 

---

以下是访问数据的方式： 工作

HTML:

编辑

阅读您的评论后，请参阅我的更新

来自{{weatherLocation}的天气
风速为：{windSpeed}}，度为{{windsdegree}}

提交
角度.module（'myApp'，[]）.controller（“MyCtrl”，MyCtrl）；
函数MyCtrl（$scope$http）{
$scope.location=“”；
$scope.findWeather=函数（）{
http://api.openweathermap.org/data/2.5/weather?q=washington
$http.get（“http://api.openweathermap.org/data/2.5/weather?q=“+$scope.location）.成功（函数（数据）{
$scope.weatherLocation=data.name；
$scope.windSpeed=data.wind.speed；
$scope.windegree=data.wind.deg；
}) 
}
}

您到底有什么问题？没有显示数据？错误消息？基本上将搜索输入连接到REST API。假设我正在寻找日本。我将其输入搜索框，然后单击提交。然后日本这个词被添加到API的URL中，然后我收到了返回的信息。基本上，当我点击“提交”按钮，将其连接到URL时，我就被卡住了。我可以做那个部分，我主要寻找的是将我提交的内容连接到我被卡住的URL。基本上，当我按下submit按钮时，它会将我键入的内容放入url中。您能举个例子说明您希望url的外观以及从文本框中获得的数据吗？因为我在urlOK中没有看到位置的名称，所以URL看起来是这样的：谢谢你，我想要，很抱歉没有在最后一条评论中添加正确的URL，因为我的计算机在我打字的中途冻结了。谢谢你的帮助如果这个答案对你有用，请投票并接受答案，谢谢

<div ng-controller="MyCtrl">
   The weather from {{weatherLocation}}
    <p>The wind speed is: {{windSpeed}} and the degree is {{windDegree}}</p>
</div>

angular.module('myApp',[]).controller("MyCtrl", MyCtrl);


function MyCtrl($scope, $http) {
    $http.get("http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139").success(function(data){
    $scope.weatherLocation = data.name;
    $scope.windSpeed = data.wind.speed;
    $scope.windDegree = data.wind.deg;

        console.log(data)
    }) 
}

<div ng-controller="MyCtrl">
   The weather from {{weatherLocation}}
    <p>The wind speed is: {{windSpeed}} and the degree is {{windDegree}}</p>
    <input type="text" ng-model="location"/>
    <button ng-click="findWeather()">submit</button>
</div>

angular.module('myApp',[]).controller("MyCtrl", MyCtrl);


function MyCtrl($scope, $http) {

    $scope.location = "";

    $scope.findWeather = function(){
    http://api.openweathermap.org/data/2.5/weather?q=washington
            $http.get(" http://api.openweathermap.org/data/2.5/weather?q=" + $scope.location).success(function(data){
    $scope.weatherLocation = data.name;
    $scope.windSpeed = data.wind.speed;
    $scope.windDegree = data.wind.deg;

    }) 
    }
}