欢迎使用优快云-markdown编辑器

最新推荐文章于 2021-01-07 23:01:28 发布

原创最新推荐文章于 2021-01-07 23:01:28 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的简单天气查询应用。该应用通过HTTP请求从和风天气API获取指定城市的当前天气信息，并在网页上展示城市名、日期及温度范围等关键数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的请求网络数据，然后进行查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angulatjs/angular-1.5.5/angular.min.js"></script>
    <script>
        var url1='https://free-api.heweather.com/v5/weather?city=';
        var url3='&key=545d63e185fc48169a43cbabba6e74d2';
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope,$http) {
            $scope.show=false;
            $scope.btn=function () {
                $scope.show=true;
                var url2=$scope.city;
                $http({
                    url:url1+url2+url3
                }).then(function (data) {
                    $scope.data=data.data;
                   $scope.cityname= $scope.data.HeWeather5[0];
                })
                $scope.city=""
            }

        });

    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
    <input type="text" ng-model="city"><button ng-click="btn()">查询</button>
<ul ng-show="show">
    <li>
        城市：{{cityname.basic.city}}<br>
        日期：{{cityname.daily_forecast[0].date}}<br>
        温度：{{cityname.daily_forecast[0].tmp.max}}-{{cityname.daily_forecast[0].tmp.min}}
    </li>


</ul>
</body>
</html>

这里写图片描述