search

Home >Web Front-end >JS Tutorial >Detailed explanation of weather forecast function implemented in angularjs

Detailed explanation of weather forecast function implemented in angularjs

小云云
小云云Original
2018-01-04 09:43:221687browse

This article mainly introduces the weather forecast function of angularjs in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The example in this article shares the specific code for Android Jiugongge image display for your reference. The specific content is as follows


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

Related recommendations:

Weather forecast for mini program development

WeChat mini program development weather forecast example code

html5 weather forecast card design effect

The above is the detailed content of Detailed explanation of weather forecast function implemented in angularjs. For more information, please follow other related articles on the PHP Chinese website!

html5 android 微信小程序
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Use the vue-lazyload plug-in to lazily load images in vueNext article：Use the vue-lazyload plug-in to lazily load images in vue

Related articles

See more