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

Question

过去几天我一直在学习 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 }); 

Answer 1

这是您访问数据的方式： 一个工作的fiddle

HTML：

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

编辑

看完你的cmets，看我更新的fiddle

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

    }) 
    }
}