给大家做一个关于天气的例子

最新推荐文章于 2022-07-03 09:37:28 发布

努力努力更努力

最新推荐文章于 2022-07-03 09:37:28 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

分类专栏： angluarjs

本文链接：https://blog.youkuaiyun.com/qq_40317838/article/details/78040259

angluarjs 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的简单天气查询应用。该应用通过$http服务从和风天气API获取指定城市的天气信息，并在界面上展示城市名称、空气质量建议及当前风向等数据。

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

myapp.controller("chaxunController",function ($scope,$http) {
    var ul1="https://free-api.heweather.com/v5/weather?city=";
    var ul2;
    var ul3="&key=545d63e185fc48169a43cbabba6e74d2";
    $scope.city="阳泉";
    $scope.show=false;
    $scope.chaxun=function () {
        ul2=$scope.city;
        $scope.show=true;
        $http({
            url:ul1+ul2+ul3
        }).then(function (data) {
            console.log(data);
            $scope.city2=data.data.HeWeather5[0].basic.city;
            $scope.date=data.data.HeWeather5[0].suggestion.air.txt;
            $scope.dir=data.data.HeWeather5[0].now.wind.dir;
            $scope.city="";

        });

       /* $scope.show=false;*/
    }
});
<div class="haha4">
<input type="text" ng-model="city"/><button ng-click="chaxun()">查询</button>
    <ul ng-show="show">
        <li>{{city2}}</li>
        <li>{{date}}</li>
        <li>{{dir}}</li>
    </ul>