APIの文字列を更新する

Question

私のプログラムでは、天気アプリで、別のAPIからユーザーのIPによってすぐに取得した郵便番号を持っています。この即時の郵便番号から、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> 

EDIT：全コントローラコード

Answer 1

を追加しました私はいくつかの助けを借りて自分でそれを解決しましたその他！

私は基本的にapp.jsコードを再配置する必要がありました。私は基本的に更新された郵便番号で別のGET要求を出しました。いくつかのコメント/提案を残すために時間を割いた皆様、ありがとうございました！