AngularJS获取天气预报(案例)

最新推荐文章于 2024-05-24 10:49:57 发布

约德尔蒙

最新推荐文章于 2024-05-24 10:49:57 发布

阅读量1.4k

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/gyq04551/article/details/55667029

版权

AngularJs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>天气预报</title>
</head>
<body ng-app="Weather">
	
	<div ng-controller="WeatherController">
		<table>
			<tr ng-repeat="weather in weatherData">
				<td>{{weather.date}}</td>
				<td>{{weather.temperature}}</td>
				<td>{{weather.weather}}</td>
				<td>{{weather.wind}}</td>
				<td><img ng-src="{{weather.dayPictureUrl}}" alt=""></td>
				<td><img ng-src="{{weather.nightPictureUrl}}" alt=""></td>
			</tr>
		</table>
	</div>

	<script src="./libs/angular.min.js"></script>
	<script>
			
		var Weather = angular.module('Weather', []);

		Weather.controller('WeatherController', ['$scope', '$http', function ($scope, $http) {

			$http({
				url: 'http://api.map.baidu.com/telematics/v3/weather',
				method: 'jsonp',
				params: {
					location: '北京',
					output: 'json',
					ak: '0A5bc3c4fb543c8f9bc54b77bc155724',//这两个ak用不了了需要自己取下载
					callback: 'JSON_CALLBACK'
				}
			}).success(function (info) {

				// console.log(info);

				$scope.weatherData = info.results[0].weather_data;

			});
					

		}]);

	</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

约德尔蒙

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
AngularJS获取天气预报(案例)

天气预报 {{weather.date}} {{weather.temperature}} {{weather.weather}} {{weather.wind}} var Weather = angular.module('Weather', []); Weather.co
复制链接

扫一扫