以角度获取用户位置后如何更新DOM答案

【问题标题】：How to update DOM after getting user location in angular以角度获取用户位置后如何更新DOM
【发布时间】：2016-04-08 06:23:02
【问题描述】：

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

我还添加了带有预填充城市的下拉菜单。页面加载时，会选择默认城市。

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

我设法比较了两个结果，但不知道如何使用新位置更新页面。

【问题讨论】：

只需为您的模型分配更新的值。没有别的了。。

标签： javascript angularjs html geolocation

【解决方案1】：

最明显的方法是：

首先，在您的范围内更改 city.selected
其次，ngChange 不会被触发，因为输入没有改变，它是模型改变。所以手动触发 cityChange，在 cityChange 函数中做任何你必须做的事情（更新 DOM，显示内容，最好调用其他函数）。

【讨论】：