Question

我正在尝试使用angularJS创建一个简单的天气Web应用程序。我正在使用天气API，我想制作一个输入框，以便页面根据用户输入的城市加载天气。

这是我的代码：

HTML：

<!DOCTYPE html>
<html>
  <head>
      <script src="./node_modules/angular/angular.js"></script>
      <script src="./myApp3.js"></script>
      <link rel="stylesheet" type="text/css" href="styles.css">
  </head>

  <body>
    <h1>Weather Center</h1>
    <div ng-app="myApp" ng-controller="myCtrl">
      <form>
      Please enter your location: <input type="text" ng-model="location">
    </form>
        <p id="field">
          Location: <span id="result">{{ myData.data.name }}, {{ myData.data.sys.country }}</span>
        </p>
        <p id="field">
          Current Conditions: <span id="result">{{ myData.data.weather[0].description }}</span>
        </p>
        <p id="field">
           Temperature: <span id="result">{{ myData.data.main.temp | kelvinToFahrenheit | number: 0 }}&deg;F</span>
        </p>
        <p id="field">
          Pressure: <span id="result">{{ myData.data.main.pressure }} mb</span>
        </p>
        <p id="field">
          Wind Speed: <span id="result">{{ myData.data.wind.speed }} mph</span>
        </p>
    </div>

  </body>
</html>

JS：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("http://api.openweathermap.org/data/2.5/weather?q=" + $scope.location + ",uk&appid=44db6a862fba0b067b1930da0d769e98")
    .then(function(response) {
      $scope.myData = response;
    }, function(response) {
      $scope.myData = "Something went wrong";
    });
});

app.filter('kelvinToFahrenheit', function() {
  return function(kelvin) {
    return (parseFloat(kelvin) - 273.15) * 1.80 + 32.00;
  };
});

我让它没有输入框工作，我只有“伦敦”，其中“$ scope.location”在http.get（）内。但是，当我使用此代码并在输入框中键入London时，它不起作用。

提前致谢！

Answer 1

您可以使用ng-keyup事件来检测值何时发生变化。

我对您的代码进行了以下操作，

我在您的输入框中添加了ng-keyup="getLocation()"。

我将你的http函数放在$scope.getLocation函数中。

直播示例：http://codepen.io/larryjoelane/pen/WraEOY

HTML：

<h1>Weather Center</h1>
<div ng-app="myApp" ng-controller="myCtrl">
  <form>
    Please enter your location:
    <input type="text" ng-model="location" ng-keyup="getLocation()">
  </form>
  <p id="field">
    Location: <span id="result">{{ myData.data.name }}, {{ myData.data.sys.country }}</span>
  </p>
  <p id="field">
    Current Conditions: <span id="result">{{ myData.data.weather[0].description }}</span>
  </p>
  <p id="field">
    Temperature: <span id="result">{{ myData.data.main.temp | kelvinToFahrenheit | number: 0 }}&deg;F</span>
  </p>
  <p id="field">
    Pressure: <span id="result">{{ myData.data.main.pressure }} mb</span>
  </p>
  <p id="field">
    Wind Speed: <span id="result">{{ myData.data.wind.speed }} mph</span>
  </p>
</div>

JavaScript的：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

$scope.getLocation = function(){
  $http.get("http://api.openweathermap.org/data/2.5/weather?q=" + $scope.location + ",uk&appid=44db6a862fba0b067b1930da0d769e98")
    .then(function(response) {
      $scope.myData = response;
    }, function(response) {
      $scope.myData = "Something went wrong";
    });


};

});


app.filter('kelvinToFahrenheit', function() {
  return function(kelvin) {
    return (parseFloat(kelvin) - 273.15) * 1.80 + 32.00;
  };
});

Answer 2

首先，您需要将$http包装在函数

中

$scope.getData = function(){
    $http.get("http://api.openweathermap.org/data/2.5/weather?q=" + $scope.location + ",uk&appid=44db6a862fba0b067b1930da0d769e98")
        .then(function(response) {
          $scope.myData = response;
        }, function(response) {
          $scope.myData = "Something went wrong";
        });
}

然后使用ng-submit之类的事件来调用此函数

<form ng-submit="getData()">
  Please enter your location: <input type="text" ng-model="location">
  <button>Get Data</button>
</form>

Answer 3

您没有注意location的更改。使用$scope.$watch('location', ...)。

使用带有ng-model的http.get的AngularJS

3 个答案: