angularJs 网络请求实现天气预报

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

余生I

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

阅读量514

点赞数

分类专栏： angularJS

本文链接：https://blog.csdn.net/qq_39357892/article/details/78082667

版权

angularJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="ajs/angular.min.js"></script>

    <script>
        var url1='https://free-api.heweather.com/v5/weather?city=';
        var url3='&key=545d63e185fc48169a43cbabba6e74d2';
        var app=angular.module("mpp",[]);
        app.controller("crtl",function ($scope,$http) {
            $scope.toggle=false;
            $scope.check=function () {
                $scope.toggle=true;
                var url2=$scope.ct;
                $http({
                    url:url1+url2+url3
                }).then(function (data) {
                    $scope.data=data.data;
                    $scope.city=$scope.data.HeWeather5[0];
                })
            }
        });
    </script>
</head>
<body ng-app="mpp" ng-controller="crtl">
<input type="text" value="beijing" ng-model="ct">
<input type="button" value="查询" ng-click="check()">
<p>未来三天的天气</p>
<ul ng-show="toggle">
    <li>{{city.basic.city}};<span>跟新时间:{{city.basic.update.loc}}</span>
        <p>气温:{{city.now.tmp}}deg</p>
        <p>wind:{{city.now.wind.dir}}</p></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>