使用ng-repeat和openweathermap api搜索和重复城市

时间:2015-10-31 18:15:50

标签: javascript html angularjs jsonp openweathermap

大家好我已经尝试了一段时间,使用网站提供的api和angularjs中的ng-repeat功能,从openweathermap.org对数据进行排序。由于某种原因,我似乎无法让它工作......我想要做的是首先显示所有收集的数据,然后使用输入字段对其进行排序。

的Javascript

var app = angular.module('weatherApp', []);

app.controller('weatherController', function($scope, $http) {

$http.jsonp('http://api.openweathermap.org/data/2.5/weather', { params : {
	q : $scope.city,
	units : $scope.units,
	callback: 'JSON_CALLBACK',
	APPID: $scope.id
}}).success(function(data){
	$scope.data = data;
});
	
$scope.units = 'metric';
$scope.id = 'e08f9689f06c1b6eddb44396c749eb54';  

$scope.reset = function(){
return $scope.city = "";
};
});
HTML

<div ng-app="weatherApp" ng-controller="weatherController">
<input ng-model="city.name" placeholder="City" />
<button ng-click="reset()">Reset</button>
<ul>
    <li ng-repeat=" x in data | filter : city">
        {{x.name}}
    </li>
</ul>

1 个答案:

答案 0 :(得分:0)

您可以在致电$scope.id之前尝试设置$scope.units$http.jsonp。在我看来,值在设置之前在参数中使用。尝试将其更改为:

var app = angular.module('weatherApp', []);

app.controller('weatherController', function($scope, $http) {

    $scope.units = 'metric';
    $scope.id = 'e08f9689f06c1b6eddb44396c749eb54';  

    $http.jsonp('http://api.openweathermap.org/data/2.5/weather', { params : {
        q : $scope.city,
        units : $scope.units,
        callback: 'JSON_CALLBACK',
        APPID: $scope.id
    }}).success(function(data){
        $scope.data = data;
    });

    $scope.reset = function(){
        $scope.city = '';
    };
});