Maison > Article > interface Web > Explication détaillée de la fonction de prévisions météorologiques implémentée dans Angularjs

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

小云云original: 2018-01-04 09:43:221651parcourir

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>

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!

html5 android 微信小程序

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utiliser le plug-in vue-lazyload pour charger paresseusement des images dans vueArticle suivant：Utiliser le plug-in vue-lazyload pour charger paresseusement des images dans vue

Articles Liés

Voir plus