Echtzeit-Eingabewert von angularjs, für ulr http.get

$ http.get ('example.com/api/json/' + 'input.value') in angularjs Controller-Funktion und Aktualisierung {{data}} gemäßEchtzeit-Eingabewert von angularjs, für ulr http.get

Eingang

var id="de1cfb221f978cebde0db9adfb5da6b9"; 
 
var city ="London"; 
 

 
angular.module('moo', []) 
 
.controller('mooAngular', function($scope, $http) { 
 

 
    $http.get('http://api.openweathermap.org/data/2.5/weather?' + 
 
    'q=' +city + 
 

 
    \t '&appid=' + id 
 
    ). 
 
     then(function(response) { 
 
      $scope.myData = response.data 
 

 

 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="container" ng-app="moo" ng-controller="mooAngular" ng-init=""> 
 
<p>T(K) ={{myData.main.temp}}&deg;</p> 
 
<input id="city" type="text" ng-change="city" name="city" placeholder="Enter name here" value=""> 
 
</div>

Quelle

2017-03-02 Alex

Willkommen bei Stack-Überlauf. Sie sollten Ihren Beitrag präzisieren. Was ist deine Frage? Was ist das Ergebnis deines Codes? Was ist das gewünschte Ergebnis? – gus27

Wenn ich das richtig verstanden, Sie für URL dynamischen Wert möchten, können Sie "$ scope" nutzen:

var id="de1cfb221f978cebde0db9adfb5da6b9"; 
var city ="London"; 

angular.module('moo', []) 
.controller('mooAngular', function($scope, $http) { 
    $scope.city = city; 
    $scope.$watch('city', function(){ 
     console.log($scope.city); 
    }); 

    $http.get('http://api.openweathermap.org/data/2.5/weather?' + 'q=' +$scope.city + '&appid=' + id 
    ).then(function(response) { 
     $scope.myData = response.data; 
    }); 
});

auch

, können Sie folgende Update:

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
    <script src="script.js"></script> 
    </head> 
    <body ng-app="moo"> 
    <h1>Hello Plunker!</h1> 
    <div class="container" ng-controller="mooAngular"> 
     <p>T(K) ={{myData.main.temp}}&deg;</p> 
     <input id="city" type="text" ng-model="city" placeholder="Enter name here" > 
    </div> 
    </body> 
</html>

geht hier arbeiten plnkr:

https://plnkr.co/edit/uDG73ajQ0Ab9iPFIaIVU?p=preview

I Uhr in der Steuerung verwendet haben, nur, dass Stadt Wert anzuzeigen aktualisiert wird. Sie können Ihre $ http Anfrage auch in $ watch anpassen/verschieben.

IMHO sollten Sie Drop-Down mit Namen von Städten anstelle von Eingabe verwenden, damit Sie direkt den Wetterserver treffen können, oder Sie müssen Stadtnamen auch überprüfen.

Aktualisiert Snippet, mit Erhaltungs-Anforderung innerhalb $ Uhr:

var id="de1cfb221f978cebde0db9adfb5da6b9"; 
var city ="London"; 

angular.module('moo', []) 
.controller('mooAngular', function($scope, $http) { 
    $scope.city = city; 
    $scope.$watch('city', function(){ 
     console.log($scope.city); 
     $http.get('http://api.openweathermap.org/data/2.5/weather?' + 'q=' +$scope.city + '&appid=' + id) 
     .then(function(response) { 
      $scope.myData = response.data; 
     }); 
    }); 
});

Quelle

2017-03-02 09:25:51

Ich habe das schon so gemacht, wenn die Eingaben nicht erfüllt sind, werden die Daten nicht synchronisiert. – Alex

@Alex hast du das aktualisierte Snippet ausprobiert? –

Echtzeit-Eingabewert von angularjs, für ulr http.get

Antwort

Verwandte Themen