$http

来源:互联网 发布:中国移动数据流量卡 编辑:程序博客网 时间:2024/06/05 21:00
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../angular-1.5.5/angular.js"></script>    <script>        var myapp=angular.module("myapp",[]);        //服务一定要依赖注入到控制器里面        myapp.controller("myCtrl",function($scope,$http){            $scope.cx="";            $scope.cha=function () {                $http({                    method:"GET",                    url:"https://free-api.heweather.com/v5/weather?city="+$scope.cx+"&key=545d63e185fc48169a43cbabba6e74d2"                }).then(function(dd){                    /*查出城市*/                   $scope.ff=dd.data.HeWeather5[0].basic.city;                    //console.log($scope.ff);                  /*查出天气的状况*/                    $scope.zs=dd.data.HeWeather5[0].aqi.city.aqi;                    $scope.wd=dd.data.HeWeather5[0].aqi.city.so2;                    $scope.xr=dd.data.HeWeather5[0].aqi.city.pm10;                    $scope.zl=dd.data.HeWeather5[0].aqi.city.qlty;                    $scope.zz=dd.data.HeWeather5[0].daily_forecast[0].cond.txt_d;                    $scope.sy=dd.data.HeWeather5[0].suggestion.trav.txt;                })            }        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><input type="text" ng-model="cx"> <button ng-click="cha()">查询</button><p ><span>{{ff}}</span><span>的天气情况</span></p><p ><span>空气质量指数:</span><span>{{zs}}</span>    <span>{{zl}}</span></p><p ><span>可吸入颗粒:</span><span>{{xr}}</span></p><p ><span>空气中的二氧化硫:</span><span>{{wd}}</span></p><p><span>天气状况:</span><span>{{zz}}</span></p><p><span>适宜:</span></p>     <p style="margin-top: 5px"><span>{{sy}}</span></p></body></html>

原创粉丝点击