欢迎使用CSDN-markdown编辑器

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

<!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>

这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值