angularjs $http请求网络数据并展示 

 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>

 

posted @ 2017-09-21 14:42  XJian  阅读(609)  评论(0)    收藏  举报