Question

我正在制作一个需要用户定位的网络应用程序。

我还包括预先填写城市的下拉菜单。页面加载时，将选择默认城市。

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

控制器

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

页面加载后，系统会要求用户分享他/她的位置，如果成功，我们会将其位置设为城市并将其存储在本地存储中。

现在我们将选定的位置城市与用户位置城市进行比较，如果它们不同，我想更新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);
    }
}

我设法比较了两个结果，但无法弄清楚如何使用新位置更新页面。

Answer 1

最明显的方法是：

首先，更改范围内选择的城市
第二，ngChange因为没有改变输入而被解雇，这是模型改变。因此，手动触发cityChange，在cityChange函数中做任何你必须做的事情（更新DOM，显示内容，最好调用其他函数）。

如何在角度获取用户位置后更新DOM

1 个答案: