Javascript 正在更新API的字符串

在我的程序中，我正在开发一个天气应用程序，其中一个zipcode立即被用户的IP从另一个API抓取。从这个即时zipcode，OpenWeatherMapAPI显示所述zipcode的天气。但是我添加了一个按钮，我想在其中加入一个功能，您可以更改zipcode并从不同的区域查看天气

在我看来，每当我添加新输入时，HTML上名为

{{zip}}

的输入都会发生变化，但它似乎没有更新API

如何更新此API调用的zipcode部分？谢谢大家!

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

var classApp=angular.module（'weatherApp'，[]）；
控制器（'weatherCtrl'，函数（$scope，$http）{
var vm=$scope；
$scope.count=0；
$http.get（“http://ip-api.com/json）。成功（功能（数据）{
vm.zip=data.zip；
vm.lat=data.lat；
vm.lon=data.lon；
$scope.getForecastByLocation=函数（myName）{
vm.zip=myName；
控制台日志（“本”）；
var apiKey=“”；
变量url=”http://api.openweathermap.org/data/2.5/weather?zip=“+vm.zip+”，美国“+”&appid=“+apiKey；
}；//getForecastByLocation
var apiKey=“”；
var openWeatherURL=”http://api.openweathermap.org/data/2.5/weather?zip=“+vm.zip+”，美国“+”&appid=“+apiKey；
$scope.getForecastByLocation（）；
//设置$scope.location并在API上执行搜索
vm.setLocation=函数（loc）{
$scope.location=loc；
$scope.getForecastByLocation（）；
};
$http.get（openWeatherURL）.success（函数（数据）{
vm.description=data.weather[0]。description；
vm.speed=（2.237*数据风速）.toFixed（1）+“mph”；
vm.name=data.name；
vm.湿度=data.main.湿度+“%”；
vm.temp=data.main.temp；
vm.fTemp=（vm.temp*（9/5）-459.67）.toFixed（1）+“华氏度”；
vm.cTemp=（vm.temp-273）.toFixed（1）+“摄氏度”；
vm.icon=”https://openweathermap.org/img/w/“+data.weather[0]。图标+”.png”；
//$scope.getForecastByLocation=函数（）{
//控制台日志（“helloooo”）；
////警报（“这是ng click的一个示例”）；
//setItem（'zipcode'，$scope.serverip）；
//log（localStorage.serverip）；
// };
//获取天气图标
if（data.weather[0].id>=200&&data.weather[0].id<300）{
$scope.weatherClass=“wi wi雷雨”；
}
if（data.weather[0].id>=300&&data.weather[0].id<400）{
$scope.weatherClass=“wi洒水”；
}
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淋浴”；
}
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 fog”；
}
if（data.weather[0].id==800）{
$scope.weatherClass=“wi-day-sunny”；
}
if（data.weather[0].id==801）{
$scope.weatherClass=“wi天晴天阴”；
}
if（data.weather[0].id==802）{
$scope.weatherClass=“wi天多云”；
}
if（data.weather[0].id==803 | | data.weather[0].id==804）{
$scope.weatherClass=“wi多云”；
}
if（data.weather[0].id==900）{
$scope.weatherClass=“wi龙卷风”；
}
if（data.weather[0].id==901 | | data.weather[0].id==960 | | data.weather[0].id==961）{
$scope.weatherClass=“wi wi雷雨”；
}
if（data.weather[0].id==902 | | data.weather[0].id==962）{
$scope.weatherClass=“wi飓风”；
}
if（data.weather[0].id==903）{
$scope.weatherClass=“wi雪花冷”；
}
if（data.weather[0].id==904）{
$scope.weatherClass=“wi hot”；
}
if（data.weather[0].id==905）{
$scope.weatherClass=“wi wi wi强风”；
}
if（data.weather[0].id==906）{
$scope.weatherClass=“wi hail”；
}
if（data.weather[0].id==951）{
$scope.weatherClass=“wi-day-sunny”；
}
如果（data.weather[0].id>=952&&data.weather[0].id=957&&data.weather[0].id

我基本上不得不重新安排我的app.js代码。我基本上用更新后的zipcode发出了另一个GET请求。感谢大家花时间留下一些评论/建议！
我在其他人的帮助下自己解决了这个问题

我基本上不得不重新排列我的app.js代码。我基本上用更新后的zipcode发出了另一个GET请求。感谢大家花时间留下一些评论/建议！
您需要再次向weather API发出请求。也许，您可以编写一个函数，接收邮政编码并返回天气。然后将其称为initial只显示用户的邮政编码，然后显示用户输入的其他邮政编码。@NicholasKajoh很抱歉，您能举个例子吗？我对angularjs/REST API还是很陌生。put HTTP命令应该在get内部？还是应该在get外部分开？谢谢！@NicholasKajoh我一直在用谷歌搜索并试图找出答案，bu它之所以不更新是因为JS是异步的？这可能是一个简单的问题。提供整个天气控制器代码会给我更多的上下文。我想说的是，您创建一个范围/函数，它接收邮政编码并返回天气。您可以在
ng上调用该函数，然后单击
，以便将请求发送到重新启动api以获取新邮政编码的天气。天气数据应该从
.then（）
方法返回，而不是从后面返回，因为该方法还不可用。@NicholasKajoh我刚刚添加了整个app.js代码！您需要进行req
 <!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>