angularjs $http 네트워크 데이터 요청 및 전시

11795 단어
 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Titletitle>
 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}}degp>
37             <p>wind:{{city.now.wind.dir}}p>
38         li>
39     ul>
40 body>
41 html>

좋은 웹페이지 즐겨찾기