Detaillierte Erläuterung der in AngularJS implementierten Wettervorhersagefunktion-js-Tutorial-php.cn

Detaillierte Erläuterung der in AngularJS implementierten Wettervorhersagefunktion

小云云

Freigeben： 2018-01-04 09:43:22

Original

1611 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!