javascript - AngularJS：在放置期间采用旧值而不是新值

Question

更新时，我想插入来自 ui 的新值，而不是本地集合中存在的旧值。下面的代码在本地集合中插入旧值（我不希望这种情况发生）。

dataService.getSupplierById($routeParams.id)
.then(function (supplier) {
    $scope.supplier = supplier; //now this contains local collection

    $scope.save = function () {
        $scope.updatedSupplier = $scope.supplier; //I want the scope to be updated and take values from the ui

        dataService.updateSupplier($routeParams.id, $scope.updatedSupplier)
        .then(function () {
            //success

        },
            function () {
                //error

            });
    };
},
function () {
    //error
});

这是我的 HTML。

<div>
    <label for="City">City</label>
    <input name="City" type="text" data-ng-model="updateSupplier.city" value="{{supplier.city}}" />
</div>

我怎样才能做到这一点？如何更新范围以采用新值？我是角度的新手。

Answer 1

如果您绑定到updateSupplier，ng-model那么您在保存时不应覆盖这些值：

$scope.save = function () {

    // remove the line that overwrites, was here    

    dataService.updateSupplier($routeParams.id, $scope.updatedSupplier)
        .then(function () {
            //success
        },
        function () {
            //error
        });
    };
}

Angular 将负责双向绑定其中的值，ng-model因此当您保存它时，它将具有在文本框中输入的正确值。

您还可以通过没有 2 个不同的范围属性来清理代码：

dataService.getSupplierById($routeParams.id)
.then(function (supplier) {
    $scope.supplier = supplier; //now this contains local collection

    $scope.save = function () {

        dataService.updateSupplier($routeParams.id, $scope.supplier )
        .then(function () {
            //success

        },
            function () {
                //error

            });
    };
},
function () {
    //error
});

然后在html中：

<div>
    <label for="City">City</label>
    <input name="City" type="text" data-ng-model="supplier.city" />
</div>

初始值应自动绑定到value属性中。