通过模态实例更新字段后角度刷新数组

Question

要编辑对象详细信息，我使用ui bootstrap模态指令。我使用相同的控制器来添加新实体或编辑已存在的实体。使用我当前的代码，当我添加一个新对象时，它会被推送到数组。现在我在更新现有对象时遇到问题。我当前的代码也将更新的对象推送到数组，但不推送到数据库，并向我显示旧记录和数组中新记录的副本。刷新之后，旧版本会消失，因为控制器会再次查询实际的数组。

$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需要填充（或者您可以使用其他方法搜索数组）。

Answer 2

我建议您保存“销售”指数，例如：

 $scope.openSaleDlg = function (sale) {
    var modalInstance = $modal.open({
        backdrop: 'static',
        templateUrl: '/sales/detail.html',
        controller: 'SaleDetailCtrl',
        scope: $scope,
        resolve: {
            saleId: function () {
                return sale.Id;
            }
        }
    });
    $scope.saleIndex = $scope.sales.indexOf(sale)
    modalInstance.result.then(
        function (sale) {
    if($scope.saleIndex >-1){
      $scope.sales[$scope.saleIndex] = sale;
    }
    else{
        $scope.sales.push(sale)
    }

    }
);