Wie aktualisiere ich DOM, nachdem ich den Benutzerstandort in eckig bekommen habe

Question

Ich mache eine Webanwendung, die den Standort des Benutzers benötigt.

Ich habe auch Dropdown mit vorgefüllten Städten enthalten. Wenn die Seite geladen wird, wird die Standardstadt ausgewählt.

<div> 
    <select class="form-control" ng-model='city.selected' required ng-options='option.value as option.name for option in citiesOptions' ng-change="cityChange()"></select> 
</div> 

-Controller

$scope.citiesOptions = [ 
    { name: 'NY', value: 'New York' }, 
    { name: 'Chicago', value: 'Chicago' }, 
    { name: 'Minneapolis', value: 'Minneapolis' }, 
    { name: 'San Francisco', value: 'San Francisco' } 
]; 
if($rootScope.usercity == null){ 
    $scope.city = { 
     selected : $scope.citiesOptions[0].value 
    }; 
    window.localStorage.setItem('usercity', $scope.citiesOptions[0].value); 
    $rootScope.usercity = window.localStorage.getItem('usercity'); 
} 
else{ 
    $scope.city = { 
     selected : $rootScope.usercity 
    }; 
} 

$scope.cityChange = function(){ 
    console.log('City Has Changed'); 
    console.log($scope.city.selected); 
    window.localStorage.setItem('usercity', $scope.city.selected); 
} 

Nach Laden der Seite werden Benutzer aufgefordert, seine/ihre Stelle zu teilen, wenn sie erfolgreich ist, wir ihre Lage Stadt erhalten und speichern sie im lokalen Speicher.

Jetzt vergleichen wir den ausgewählten Standort Stadt mit Benutzer Standort Stadt, wenn sie unterschiedlich sind, ich möchte das DOM aktualisieren und zeigen Sie auf die Benutzer Standort Stadt bezogene Elemente.

$scope.checkCity = function(){ 
    if($rootScope.usercity != $rootScope.userlocation && $rootScope.userlocation != ''){ 
     console.log('Cities are different, so choosing User City'); 
     window.localStorage.setItem('usercity', $rootScope.userlocation); 
    } 
} 

Ich habe es geschafft, die beiden Ergebnisse zu vergleichen, aber nicht herausfinden, wie die Seite mit neuen Standort zu aktualisieren.

Answer 1

Der offensichtlichste Weg ist:

• erster, die
• Sekunden in Ihrem Umfang city.selected ändern, wird ngChange nicht gefeuert werden, da die Eingabe nicht geändert wurde, ist es Modellwechsel ist. Also feuern Sie den cityChange manuell ab, tun Sie alles, was Sie tun müssen (aktualisieren Sie DOM, zeigen Sie Dinge an, vorzugsweise andere Funktionen) in der cityChange-Funktion.