Angular JS：キャンセル時に最後に編集した値を取得

Question

私はテキストボックスを持っています。値を編​​集して保存をクリックすると、テキストボックスはテキストボックス値を持つスパンタグに置き換えられますが、再度編集してキャンセルをクリックすると、最後に編集した値ではなく、変更した値が再びスパンに与えられます。

Here is [Codepen][1] 

http://codepen.io/anon/pen/WogGYX

すべてのヘルプは素晴らしいことです。

ありがとうございます。ここにも

Answer 1

保存するための独立した二つの機能を追加し、キャンセル、に値を格納を置きますローカル変数は、あなたが次のコードを理解できることを願っています。

angular.module('myApp', []) 
 
    .controller('myCtrl', function($scope) { 
 
    $scope.isEdit = false; 
 

 
    var myText = 'Enter Group Name';//local variable to store the value 
 

 
    $scope.myText = myText; 
 

 
    $scope.show = function() { 
 
     $scope.isEdit = true; 
 
     $scope.myText = myText; 
 
    } 
 

 
    $scope.save = function() { 
 
     $scope.isEdit = false; 
 
     myText = $scope.myText; 
 

 
    }; 
 

 
    $scope.cancel = function() { 
 
     $scope.isEdit = false; 
 
     $scope.myText = myText; 
 
    } 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div ng-app='myApp' data-ng-controller="myCtrl"> 
 
    <div class="panel-heading padding_0_10px white_bg"> 
 
    <p class="padding_top_10"> 
 
     <input type="text" style="border: none; outline: none; width: 110px;" placeholder="Enter Group Name" data-ng-model="myText" data-ng-show="isEdit"> 
 
     <span data-ng-show="!isEdit" data-ng-bind="myText"></span> 
 
     <span ng-click="save_group=true"> 
 
\t <i class="glyphicon glyphicon-pencil margin_left_10 rearrange_text_color vertical_align_middle" data-ng-show="!isEdit" data-ng-click="show()"></i> 
 
\t </span> <span class="pull-right gallery_title">01/10</span> 
 
     <span ng-show="save_group"> 
 
\t <span data-ng-click="save()" data-ng-show="isEdit">&nbsp; &nbsp; &nbsp;Save</span><span data-ng-click="cancel()" data-ng-show="isEdit"> &nbsp; &nbsp; &nbsp; Cancel</span> 
 
     </span> 
 
    </p> 
 

 
    </div> 
 
</div>

Answer 2

私はcodepen..pleaseで更新を持つ以前のテキストを検索

http://codepen.io/anon/pen/KNxgJR

jsの角度コード

angular.module('myApp', []) 
    .controller('myCtrl', function($scope){ 
    $scope.isEdit = false; 
    $scope.myText = "Enter Group Name"; 
    $scope.Previous=$scope.myText; 
    $scope.show = function() { 

     $scope.isEdit = true; 
    } 

    $scope.hide = function() { 

     alert($scope.Previous +' '+$scope.myText); 
     $scope.Previous=$scope.myText; 
     $scope.isEdit = false; 
    } 
    })