AngularJS с использованием http.get с ng-model

Я пытаюсь создать простую веб-приложение погоды с помощью angularJS. Я использую API погоды, и я хочу создать окно ввода, чтобы страница загружала погоду в соответствии с городом, который вводит пользователь.AngularJS с использованием http.get с ng-model

Вот мой код:

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(). Но когда я использую этот код и набираю Лондон в поле ввода, он не работает.

Заранее благодарен!

источник

2016-02-06 Eric Scandora

Сначала вам нужно обернуть $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>

источник

2016-02-06 03:09:48 charlietfl

Вы не видите изменений в location. Используйте $scope.$watch('location', ...).

источник

2016-02-06 02:59:11

бы я назвал $ scope.watch() до или после http.get()? Кроме того, какие другие аргументы после $ scope.watch ('location', ... –

Вы можете использовать событие 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; 
    }; 
});

источник

2016-02-06 03:08:41

AngularJS с использованием http.get с ng-model

ответ

Смежные вопросы