2016-04-08 8 views
0

ユーザーの所在地を必要とするWebアプリケーションを作成しています。ユーザーの場所を角で取得した後にDOMを更新する方法

また、プリフィールされた都市のドロップダウンも含まれています。ページが読み込まれると、デフォルトの都市が選択されます。

$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); 
} 

<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> 

コントローラは、ページのロード後、ユーザーは、我々は彼らの所在地の市を取得し、成功すれば、彼/彼女の場所を共有し、ローカルストレージに保管するように求めています。

ここでは、選択したロケーションの都市とユーザーのロケーションの都市を比較します。異なる場合は、DOMを更新し、ユーザーのロケーションの都市に関連するアイテムを表示します。

$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); 
    } 
} 

私は2つの結果を比較することができましたが、新しい場所でページを更新する方法を理解できませんでした。

+0

あなたのモデルに更新された値を割り当ててください。他に何も.. – Ved

答えて

0

最も明白な方法は、以下のとおりです。あなたの範囲にcity.selected

  • 秒を変更、

    • 最初の入力は、それがモデルチェンジし、変更されていなかったので、ngChangeが解雇されることはありません。だからcityChangeを手動で実行してください。あなたがしなければならないことを実行してください(DOMの更新、物の表示、好ましくは他の関数の呼び出し)。
  • 関連する問題