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つの結果を比較することができましたが、新しい場所でページを更新する方法を理解できませんでした。
あなたのモデルに更新された値を割り当ててください。他に何も.. – Ved