angularJs 网络请求实现天气预报

<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值