本文執行個體講述了Angular實現的簡單查詢天氣預報功能。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="angular.min.js"></script></head><body ng-app="myApp" ng-controller="siteCtrl"><p > <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></p><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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
