angle.copyを使用して入力をデフォルトにリセットすることはできません

Question

私はdivにユーザー名を表示しており、編集ボタンがあります。編集をクリックすると、名前を編集できるようにテキストボックスが表示されます。

私は編集をクリックすると、テキストボックスが同じテキストがdiv上に表示し、私が編集をキャンセルした場合、私は戻ってdivあるデフォルト値への変更をしたい...ここに私のコードですとります

ビュー：

<td> 
<div ng-show="!nameElements" class="item_list">{{u.fName}}</div> 
<div ng-show="nameElements"> 
    <input type="text" id="ufn" ng-model="userfName"> 
    <a href="javascript:void(0)" ng-click="updateUserName()" data-toggle="tooltip" title="Save"><i class="fa fa-floppy-o fa-lg" aria-hidden="true"></i></a> 
</div> 

角度コントローラ：

$scope.defaultfName = angular.copy(response.data[0].fName); 
. 
. 
. 
$scope.toggle = function (elem) { 
    $scope.userfName = $scope.defaultfName;//reset input 

    $scope.nameElements = !$scope.nameElements;//for the ng-view 
}; 

私の問題は、私は、テキストを変更し、入力を隠すだけでなく、テキストをリセットするためにcancelをクリックすると、テキストはリセットされません、です！つまり、編集をもう一度クリックすると、同じ変更が残っています。

Answer 1

Angular.copy正常に動作しますが、$scope.defaultfNameために助けてください。
その行からAngular.copyを削除して$scope.userfNameとしてください。

$scope.defaultfName = angular.copy(response.data[0].fName); //Copy is optional 
. 
. 
. 
$scope.toggle = function (elem) { 
    $scope.userfName = angular.copy($scope.defaultfName); //no more reference passing! 

    $scope.nameElements = !$scope.nameElements; 
}; 

と複数の打撃か...から余分な問題を防止するために、私はこのように、あなたは$scope.applyAsyncにコードを配置することをお勧め：

$scope.toggle = function (elem) { 
    $scope.$applyAsync(function() { 
     //rest of codes ... 
    }); 
};