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>