suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der in AngularJS implementierten Wettervorhersagefunktion

Detaillierte Erläuterung der in AngularJS implementierten Wettervorhersagefunktion

小云云
小云云Original
2018-01-04 09:43:221667Durchsuche

Dieser Artikel stellt hauptsächlich die Wettervorhersagefunktion von AngularJs im Detail vor. Er hat einen gewissen Referenzwert. Ich hoffe, er kann jedem helfen.

Das Beispiel in diesem Artikel teilt den spezifischen Code für die Android-Neun-Quadrat-Bildanzeige als Referenz. Der spezifische Inhalt lautet wie folgt:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>天气</title>
  <script src="../angular-1.5.5/angular.min.js"></script>
  <script>
    var u1="https://free-api.heweather.com/v5/weather?city=";
    var u2;
    var u3="&key=545d63e185fc48169a43cbabba6e74d2";
    var my=angular.module("my",[]);
    my.controller("mys",function ($scope,$http) {
      $scope.city="beijing";
      $scope.show=false;
      $scope.search=function () {
          u2=$scope.city;
          $scope.show=true;
          $http({
            url:u1+u2+u3
          }).then(function (data) {
            $scope.cityName=data.data.HeWeather5[0].basic.city;
            $scope.date=data.data.HeWeather5[0].daily_forecast[0].date;
            $scope.mTemp=data.data.HeWeather5[0].daily_forecast[0].tmp.max;
            $scope.xTemp=data.data.HeWeather5[0].daily_forecast[0].tmp.min;
          })
        $scope.city="";
      };
    })
  </script>
</head>
<body ng-app="my" ng-controller="mys">
  <input type="text" ng-model="city"/><button ng-click="search()">点击查询</button>
  <ul ng-show="show">
    <li>{{cityName}}</li>
    <li>{{date}}</li>
    <li>{{mTemp}}</li>
    <li>{{xTemp}}</li>
  </ul>
</body>
</html>

Verwandte Empfehlungen:

Wettervorhersage für die Miniprogrammentwicklung

WeChat-Miniprogrammentwicklungs-Wettervorhersagebeispielcode

HTML5-Wettervorhersagekarten-Designeffekt

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der in AngularJS implementierten Wettervorhersagefunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 android 微信小程序
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden des Vue-Lazyload-Plug-Ins zum langsamen Laden von Bildern in VueNächster Artikel：Verwenden des Vue-Lazyload-Plug-Ins zum langsamen Laden von Bildern in Vue

In Verbindung stehende Artikel

Mehr sehen