angular+查天气预报

来源：互联网发布：淘宝买家如何取消介入编辑：程序博客网时间：2024/06/08 00:02

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <script src="angular/angular.js"></script></head><body ng-app="myApp" ng-controller="siteCtrl"><div >    <input type="text" ng-model="city2" value="beijing">    <button ng-click="check()">btn</button>    <p>未来3天的天气情况</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></ul></div><script>    var url1='https://free-api.heweather.com/v5/weather?city=';    var url3='&key=545d63e185fc48169a43cbabba6e74d2';    var app = angular.module('myApp', []);    app.controller('siteCtrl', function($scope, $http) {        $scope.toggle=false;        $scope.check=function(){            $scope.toggle=true;            var url2=$scope.city2;            $http({                url:url1+url2+url3            }).then(function(data){                console.log(data.data);                $scope.data=data.data;                $scope.city=$scope.data.HeWeather5[0];            });        };    });</script></body></html>

阅读全文

0 0