javascript - 更新 API 字符串

Question

在我的程序中，我正在开发一个天气应用程序，其中用户的 IP 可以立即从另一个 API 获取邮政编码。 OpenWeatherMap API 根据该邮政编码显示该邮政编码的天气。但我添加了一个按钮，我想在其中添加一个功能，您可以更改邮政编码并查看不同地区的天气。

我发现，每当我添加新输入时，我都会看到 HTML 上名为 {{zip}} 的输入发生变化，但它似乎并没有更新 API。

如何更新此 API 调用的邮政编码部分？谢谢!

app.js

var classApp = angular.module('weatherApp', []);

classApp.controller('weatherCtrl', function($scope, $http) {
  var vm = $scope;
  $scope.count = 0;

  $http.get("http://ip-api.com/json").success(function(data) {
    vm.zip = data.zip;
    vm.lat = data.lat;
    vm.lon = data.lon;

    $scope.getForecastByLocation = function(myName) {

      vm.zip = myName;
      console.log("this");

      var apiKey = "";
      var url = "http://api.openweathermap.org/data/2.5/weather?zip=" + vm.zip + ",us" + "&appid=" + apiKey;


    };//getForecastByLocation


    var apiKey = "";
    var openWeatherURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + vm.zip + ",us" + "&appid=" + apiKey;

    $scope.getForecastByLocation();

    // Set $scope.location and execute search on API
    vm.setLocation = function(loc) {
      $scope.location = loc;
      $scope.getForecastByLocation();
    };


    $http.get(openWeatherURL).success(function(data) {
      vm.description = data.weather[0].description;
      vm.speed = (2.237 * data.wind.speed).toFixed(1) + " mph";
      vm.name = data.name;
      vm.humidity = data.main.humidity + " %";
      vm.temp = data.main.temp;
      vm.fTemp = (vm.temp * (9 / 5) - 459.67).toFixed(1) + " °F";
      vm.cTemp = (vm.temp - 273).toFixed(1) + " °C";
      vm.icon = "https://openweathermap.org/img/w/" + data.weather[0].icon + ".png";

    // $scope.getForecastByLocation = function() {
    // console.log("hellooooooooo");
    // // alert("This is an example of ng-click");
    // localStorage.setItem('zipcode', $scope.serverip);
    // console.log(localStorage.serverip);

    // };



      //Getting the weather icon
      if (data.weather[0].id >= 200 && data.weather[0].id < 300) {
        $scope.weatherClass = "wi wi-thunderstorm";
      }

      if (data.weather[0].id >= 300 && data.weather[0].id < 400) {
        $scope.weatherClass = "wi wi-sprinkle";
      }

      if (data.weather[0].id >= 500 && data.weather[0].id < 600) {
        if (data.weather[0].id == 500 || data.weather[0].id >= 520) {
          $scope.weatherClass = "wi wi-rain";
        }
        $scope.weatherClass = "wi wi-showers";
      }

      if (data.weather[0].id >= 600 && data.weather[0].id < 700) {
        $scope.weatherClass = "wi wi-snow";
      }

      if (data.weather[0].id >= 700 && data.weather[0].id < 800) {
        $scope.weatherClass = "wi wi-fog";
      }

      if (data.weather[0].id == 800) {
        $scope.weatherClass = "wi wi-day-sunny";
      }

      if (data.weather[0].id == 801) {
        $scope.weatherClass = "wi wi-day-sunny-overcast";
      }

      if (data.weather[0].id == 802) {
        $scope.weatherClass = "wi wi-day-cloudy";
      }

      if (data.weather[0].id == 803 || data.weather[0].id == 804) {
        $scope.weatherClass = "wi wi-cloudy";
      }

      if (data.weather[0].id == 900) {
        $scope.weatherClass = "wi wi-tornado";
      }

      if (data.weather[0].id == 901 || data.weather[0].id == 960 || data.weather[0].id == 961) {
        $scope.weatherClass = "wi wi-thunderstorm";
      }

      if (data.weather[0].id == 902 || data.weather[0].id == 962) {
        $scope.weatherClass = "wi wi-hurricane";
      }

      if (data.weather[0].id == 903) {
        $scope.weatherClass = "wi wi-snowflake-cold";
      }

      if (data.weather[0].id == 904) {
        $scope.weatherClass = "wi wi-hot";
      }

      if (data.weather[0].id == 905) {
        $scope.weatherClass = "wi wi-strong-wind";
      }

      if (data.weather[0].id == 906) {
        $scope.weatherClass = "wi wi-hail";
      }

      if (data.weather[0].id == 951) {
        $scope.weatherClass = "wi wi-day-sunny";
      }

      if (data.weather[0].id >= 952 && data.weather[0].id <= 956) {
        $scope.weatherClass = "wi wi-windy";
      }

      if (data.weather[0].id >= 957 && data.weather[0].id <= 959) {
        $scope.weatherClass = "wi wi-strong-wind";
      }


      // Calculate current hour using offset from UTC.

      var a = new Date(data.dt * 1000);
      var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
      var year = a.getFullYear();
      var month = months[a.getMonth()];
      var date = a.getDate();

      // Hours part from the timestamp
      var hours = a.getHours();
      // Minutes part from the timestamp
      var minutes = "0" + a.getMinutes();
      // Seconds part from the timestamp
      var seconds = "0" + a.getSeconds();

      vm.formattedDate = date + ' ' + month + ' ' + year;
      vm.formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);

      vm.sunrise = new Date(data.sys.sunrise * 1000 + (scope.offsetHours * 3600000) + (scope.offsetMinutes * 60000));
      vm.sunset = new Date(data.sys.sunset * 1000 + (scope.offsetHours * 3600000) + (scope.offsetMinutes * 60000));
      vm.currentHour = datetime.getUTCHours();
      vm.sunriseHour = sunrise.getUTCHours();
      vm.sunsetHour = sunset.getUTCHours();

    }); //closing OpenWeatherMap

  }); //closing IP-API

}); //closing Controller

index.html

 <!doctype html>
    <html lang="en">
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta charset="utf-8">
            <title>OpenWeather App</title>
             <link href='https://fonts.googleapis.com/css?family=Montserrat:300,400,700' rel='stylesheet' type='text/css'>
            <link rel="stylesheet" href="css/weather-icons.min.css">
            <link rel="stylesheet" href="css/bootstrap/css/bootstrap.css"/>
            <link rel="stylesheet" href="css/app.css"/>
        </head>
        <body ng-app="weatherApp" ng-controller="weatherCtrl" class= "text-center info" ng-style="weatherBackground">


        <div class ="header">
          <div class="left">
          <h3 style="text-align: left; font-size: 25px;">{{formattedDate | uppercase}}</h3>
           <h3 style="text-align: left; font-size: 25px;">{{formattedTime | uppercase}}</h3><br>
          </div>
          </div>

          <div class="right">
            <div class="input">
              <input ng-model="myName"  type="text" placeholder="enter zipcode"><br>
              <button  ng-disabled="myName==null || myName==''" ng-click="getForecastByLocation(myName)" style="margin-top: 10px">Search!</button>
            </div>
          </div> 
        </div>



    <br><br>


        <div class="panel">
            <h3 style="font-size: 25px; margin-right: 275px; margin-top: 35px">{{name | uppercase}}</h3><br>

            <i ng-class="weatherClass" style="font-size:100px; margin-top: -10px;"></i>
            <h3 style="text-align: center; font-size: 60px;  margin-top: 15px; ">{{fTemp | uppercase}}</h3>
            <p>{{description | uppercase}} <img ng-src="{{icon}}"/></p>
            <p>{{location}}</p>
            <a class="btn-lg btn-primary">{{speed}} </a>
            <a class="btn-lg btn-primary">{{humidity}}</a>
            <p>{{zip}}</p>

        </div>

            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
            <script src="js/boo.js"></script>


    </body>


    </html>

编辑:添加了整个 Controller 代码

Answer 1

我在其他人的帮助下自己解决了这个问题!

我基本上必须重新排列我的 app.js 代码。我基本上使用更新的邮政编码发出了另一个 GET 请求。感谢大家花时间留下一些评论/建议!