如何恢復angular 1 Ng-model的變化
[英]How to revert changes in angular 1 Ng-model
問題描述
當用戶單擊“取消”按鈕時，我試圖恢復輸入框的值。 我在這里做錯了什么？ 這里的顯示按鈕將備份 'temp' 變量中的值，如果用戶在還原按鈕的幫助下取消輸入，它應該反映原始值。
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 個解決方案
解決方案1
2 已采納 2019-06-17 05:50:37
有兩個錯誤，
每次輸入值更改時，您都在修改臨時變量，因此 temp 不再存儲初始值。
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>
解決方案2
0 2019-06-17 05:54:10
您可以通過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>
Angular指令：選擇更改時，ng-model沒有正確更新
[英]Angular directive: ng-model not updated properly when selection changes
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.