Explication détaillée de la fonction de prévisions météorologiques implémentée dans Angularjs-js tutoriel-php.cn

Explication détaillée de la fonction de prévisions météorologiques implémentée dans Angularjs

小云云

Libérer： 2018-01-04 09:43:22

original

1651 Les gens l'ont consulté

Cet article présente principalement en détail la fonction de prévisions météorologiques d'angularjs. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

L'exemple de cet article partage le code spécifique pour l'affichage d'images à neuf carrés Android pour votre référence. Le contenu spécifique est le suivant

<!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>

Copier après la connexion

Recommandations associées ：

Prévisions météorologiques pour le développement d'un mini-programme

Exemple de code de prévision météorologique pour le développement d'un mini-programme WeChat

Effet de conception de carte de prévisions météorologiques HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!