AngularJS修改购物车数据后HTML视图未实时更新如何解决？

问题原因 #

你遇到的是AngularJS脏值检测未触发导致的视图不同步问题：所有数据操作都是先读写localStorage，再重新给$scope.cart赋值，部分场景下这个赋值操作没有被AngularJS的脏检测机制捕获，因此不会触发视图重渲染。

解决方案 #

方案1：手动触发脏检测

修改updateList方法，在赋值完成后主动触发脏检测循环，确保视图同步更新：

$scope.updateList = function () {
    $scope.cart = $scope.getList();
    console.log($scope.cart);
    // 避免重复触发digest报错，先判断当前状态
    if (!$scope.$$phase) {
        $scope.$digest();
    }
};

方案2：优化ng-repeat跟踪逻辑

默认ng-repeat按对象引用判断是否需要更新节点，你每次从localStorage解析出来的都是全新的数组对象，容易触发检测异常，修改HTML中的ng-repeat代码，按商品id跟踪：

<div class="basket_item" ng-repeat="obj in cart track by obj.id">

方案3（推荐）：调整数据操作逻辑

不要每次都从localStorage拉取全量数据重赋值，而是直接操作$scope.cart数组，操作完成后再同步到localStorage，完全符合AngularJS的绑定机制，从根源避免检测失效，例如增减数量的逻辑可以改成：

$scope.increaseAmount = function (id) {
    const target = $scope.cart.find(x => x.id == id);
    target.amount++;
    localStorage.setItem(_shopItemsKey, JSON.stringify($scope.cart));
};

修改后不需要额外调用updateList，AngularJS会自动检测到数组内对象属性的变更，实时更新视图。

内容的提问来源于stack exchange，提问作者Valdemar