Question

我有以下问题，我需要一些关于它的可能原因/解决方案的意见。

我的桌子的主体包含ng-repeat

<tr data-ng-repeat="product in shoppingCart"> ... </tr>

每行都有一个删除按钮：

<td class="total"><i data-ng-click="removeProduct(product, $index)" class="icon-remove-circle"> </i></td>

和功能：

removeProduct: function (removedProduct, index) {
     var _this = this;
     _this.$scope.shoppingCart.splice(index, 1);

     // + DELETE API Request
 },

问题在于，即使我不等待API请求响应并且模型中的数据立即更新（shoppingCart对象的长度和内容），更改也会在UI中显示，但显着延迟而不是应该是即时的。

编辑：我只是想通过从项目中删除角度动画（ngAnimate）来解决问题。问题是我在项目中使用角度动画，我无法删除它。

Answer 1

如果我没错，你正在做的是从shoppingCart列表中删除一个项目，甚至没有检查你的删除API的响应。可能性是API甚至可能失败，尽管如此，项目也会被删除。根据API响应执行删除，可能类似于 -

removeProduct: function (removedProduct, index) {
    var _this = this;
    $http.post('DELETE API').then(function(success) {
        _this.$scope.shoppingCart.splice(index, 1); 
    }, function(failure) {
        console.log("Error in deleting", failure)
    });
},

从您的删除API获得响应后，根据响应，您可以更新购物车（从购物车中删除商品）或抛出错误。

UI更新中的数据延迟 - ng-repeat（ngAnimate问题）

1 个答案: