javascript - 通过模态实例更新字段后，Angular 刷新数组

Question

要编辑对象详细信息，我使用 ui bootstrap 模式指令。我使用相同的 Controller 添加新实体或编辑现有实体。使用我当前的代码，当我添加新对象时，它会被推送到数组中。现在我在更新现有对象时遇到问题。我当前的代码还将更新的对象推送到数组，但不推送到数据库，并显示数组中旧记录和新记录的重复项。刷新后，旧的当然会消失，因为 Controller 再次查询实际的数组。

$scope.openSaleDlg = function (saleId) {
    var modalInstance = $modal.open({
        backdrop: 'static',
        templateUrl: '/sales/detail.html',
        controller: 'SaleDetailCtrl',
        scope: $scope,
        resolve: {
            saleId: function () {
                return saleId;
            }
        }
    });

modalInstance.result.then(
    function (sale) {
        $scope.sales.push(sale)
    }
);

};

我可以在成功时执行 .then $scope.sales = Sale.query(); ，但也许有更好的方法来通过不查询数据库来更新列表中的对象又来了？

Answer 1

您可以按照您的建议进行操作，并更新列表中的对象(如果存在)，而不是推送它。 Angular 将接受更改并重新渲染。

类似于:

modalInstance.result.then(function (sale) {
  var saleToUpdate = $scope.sales.find(function (existingSale) {
    return existingSale.id == sale.id;
  });

  if (saleToUpdate) {
    angular.extend(saleToUpdate, sale);
  } else {
    $scope.sales.push(sale);
  }
});

请注意，Array#find 需要一个polyfill(或者您可以使用不同的方法来搜索数组)。