1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="../../AngularJS/angular.min.js"></script>
7 <script>
8 var url1="https://free-api.heweather.com/v5/weather?city=";
9 var url3="&key=545d63e185fc48169a43cbabba6e74d2";
10 var myapp=angular.module("myapp",[]);
11 myapp.controller("myCtrl",function ($scope,$http) {
12 $scope.toggle=false;
13 $scope.check=function () {
14 //设置一个开关
15 $scope.toggle=true;
16 var url2=$scope.city2;
17 // 网络请求
18 $http({
19 url:url1+url2+url3
20 }).then(function (data) {
21 console.log(data.data);
22 $scope.data = data.data;
23 $scope.city = $scope.data.HeWeather5[0];
24 });
25 }
26 })
27 </script>
28 </head>
29 <body ng-app="myapp" ng-controller="myCtrl">
30 <input type="text" ng-model="city2" value="beijing">
31 <button ng-click="check()">获取天气</button>
32 <p>未来3天的天气情况</p>
33 <ul ng-show="toggle">
34 <li>
35 {{city.basic.city}};<span>更新的时间:{{city.basic.update.loc}}</span>
36 <p>气温:{{city.now.tmp}}deg</p>
37 <p>wind:{{city.now.wind.dir}}</p>
38 </li>
39 </ul>
40 </body>
41 </html>
