Как отменить изменения в угловой 1 Ng-модели - PullRequest
Новая
       2

Как отменить изменения в угловой 1 Ng-модели

2 голосов
/ 17 июня 2019

Я пытаюсь восстановить значение поля ввода, когда пользователь нажимает кнопку Отмена .Что я здесь не так делаю?Здесь кнопка show создаст резервную копию значения переменной in 'temp', и если пользователь отменяет ввод с помощью кнопки revert , он должен отражать исходные значения.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name={}
    var temp=""
    $scope.name.a = {"person":"Shah"};
    $scope.editOn = false
    $scope.abc= function(){
        $scope.editOn= true
        temp=$scope.name.a
    }
    $scope.cde= function(){
        $scope.name.a =  temp
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<div ng-app="myApp" ng-controller="myCtrl"><br>
{{name.a.person}}  <br>
Name: <input ng-model="name.a.person" ng-show="editOn">
<button ng-click="abc()">show</button>
<button ng-click="cde()">revert</button>

</div>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 17 июня 2019

Было две ошибки,

  1. Вы изменяете переменную temp каждый раз, когда изменяется входное значение, поэтому temp больше не сохраняет первоначальное значение.

  2. temp и name.a указывают на один и тот же объект, они имеют одинаковую ссылку. Таким образом, вам придется скопировать объект так, чтобы temp и name.a имели ссылку на разные объекты. 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name={}
    var temp=""
    $scope.name.a = {"person":"Shah"};
    $scope.editOn = false
    temp=angular.copy($scope.name.a)
    $scope.abc= function(){
      $scope.editOn= true
    }
    $scope.cde= function(){
      $scope.name.a =  temp
      console.log(temp)
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<div ng-app="myApp" ng-controller="myCtrl"><br>
{{name.a.person}}  <br>
Name: <input ng-model="name.a.person" ng-show="editOn">
<button ng-click="abc()">show</button>
<button ng-click="cde()">revert</button>

</div>
</body>
</html>
0 голосов
/ 17 июня 2019

Вы можете достичь этого с помощью ng-change и сохранением строки, а не объекта в вашей переменной temp.Смотрите фрагмент ниже: 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name={}
$scope.changeName = () => {
    $scope.name.a.person = $scope.inputModel;
}
var temp=""
    $scope.name.a = {"person":"Shah"};
    $scope.editOn = false
    $scope.abc= function(){
         $scope.editOn= true
         temp = $scope.name.a.person
         $scope.inputModel = temp;
    }
    $scope.cde = function(){
         $scope.inputModel =  temp
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<div ng-app="myApp" ng-controller="myCtrl"><br>
{{name.a.person}}  <br>
Name: <input ng-change="changeName()" ng-model="inputModel" ng-show="editOn">
<button ng-click="abc()">show</button>
<button ng-click="cde()">revert</button>

</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...