Question

我有一张比率表。其中一列是按钮。当我点击它时，将显示该行的详细信息，我可以修改一些字段。所以我用了Initialised输入。但是，当我修改输入中的文本时，原始文本也会被修改，我也不明白为什么。

该表的部分代码：

<tr ng-repeat="ratio in listRatios ">
    <td>{{ratio.name}}</td>
    <td ><button type="button" class="btn btn-default" 
         ng- click="showDetail(ratio)">D&eacutetail</button></td>                           
</tr>

输入和测试

<label>Nom: <input type="text" class="form-control" ng-model="modif.name" /></label>        
        <div>{{modif.name}}</div>
        <div>{{original.name}}</div>

我的控制器

angular.module('app').controller('RatioCtrl', function ($scope, $http) {    
    $scope.listRatios=[];
    $scope.original=null;
    $scope.modif=null;  
    $scope.detail=false;
    $scope.form=null;

    $scope.getRatiosList = function() {  
        $http({method: 'GET', url: 'getRatio.web'}).
        success(function(data, status, headers, config) {
            $scope.listRatios = data;
        }).
        error(function(data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        });
    }

        $scope.showDetail = function(ratio){
        $scope.original= ratio;
        $scope.modif= ratio;
        $scope.detail=true;
    }
});

我的问题是，当我修改输入中的值（ modif ）时，原始的值和行中的值表也改变了。我怎样才能解决这个问题？

Answer 1

我相信你在某些代码中说过modif = origin。

在那部分你要克隆起源。

试试这个

// Deep copy
 modif = jQuery.extend(true, {}, origin);

Answer 2

这是预期的。表中的ratio和详细信息表单中的modif都引用了完全相同的对象。因此，如果您修改modif.name，则还会修改ratio.name，从而更新表格。这是角度双向绑定的基本原则：

var ratio = {
    name: 'foo'
};
var modif = ratio;
modif.name = 'bar';
console.log(ratio.name); // prints 'bar'

如果您希望详细信息表单修改其他对象，则需要复制ratio，并使modif引用该副本。当您“保存”表单时，您必须将modif的所有字段复制到ratio，或者将ratio替换为modif。

Answer 3

$ scope.original = ratio; $ scope.modif = ratio;

两个变量都指向相同的对象，这就是为什么会发生这种情况。

试试这个 $ scope.original = jQuery.extend（true，{}，ratio）; $ scope.modif = jQuery.extend（true，{}，ratio）;

初始化输入的奇怪行为

3 个答案: