AngularJS - ボタンをクリックしてng-modelをバインドする

Question

ng-modelとbuttonを使用してデータバインディングに問題があります。

私のサイトの動作原理

：

1. 私のHTMLサイトがprojectsのリストが表示されます（外部.jsonファイルからロードされました）。入力の
2. 各行は（等のようなproject.name、project.date）プロジェクトについての関連データで満たされたいくつかの<input type="text"を含むmodalを表示Editという名前のボタンを有する
3. 初期valueがデータをオブジェクトと等価である（テキスト入力はName意志と呼ばれますproject.nameなど）
4. Saveボタンをクリックして操作を確認した場合にのみオブジェクトが変更されます（confirm(sometext)は問題ありません）。 ボタンをクリックしないでモーダルを閉じるか、確認ボックスでcancelを押すと、データが更新されません。
5. 入力を編集する（project.nameが "Project2"で、3つの数字を追加して "Project2137"とすると）、モーダルを閉じてもう一度開くと、入力内に "Project2"というテキストが表示されるはずです変更され、入力のみ）

これまでのところ、私は単一のテキスト入力がng-modelを使用して、この

<input type="text" id="editName" class="form-control" ng-model = "project.name"> 

のようになりますことを理解し、それらがバインドされていることを意味します。それは私が知っているものです。ただし、入力を編集すると、データを入力するとすぐにオブジェクトが更新されます。 ng-model-optionsで試してみましたが、解決策が見つかりませんでした。

は、私はプログラム的にも

<input type="text" id="editName" class="form-control" value = {{project.name}}> 
.... 
<button type="button" class="btn pull-right btn-primary btn-md" ng-click="edit(project)" data-dismiss="modal" >Save</button> 

と機能を使用して、それを実行しようとしました：

$rootScope.edit = function(project) 
    { 
     if(confirm("Are you sure to save changes?")) 
      { 
       project.name = angular.element(document.getElementById('editName')).val(); 
      // ...and so on with other properties 

このソリューションは、私が（オブジェクトのみ確認に更新される）を達成するために何を望むかにちょっと近いです、私は別の問題に直面した：i nputは、ルール＃5に反して、モーダルが開かれるたびにではなく、最初から一度だけオブジェクトからデータを読み込む。

ng-modelバインド機能またはカスタム機能を使用してこれを修正する方法はありますか？他にも簡単な方法がありますか？

--EDIT--ここ

私は、すべてがうまく機能ボタンを使用してデータを保存し、[保存]をクリックして問題ありません

は projectsリストに反映されます。 （私がF5キーを押すまで）。 問題は、入力テキストが projectに正しくバインドされていないことと、それを修正したいことです。

1. サンプルデータ（擬似コード）

   Project1の。= "PROJ1" project2.name = "Proj2"

2. に名前を付ける私は、行＃1

3. テキスト入力ディスプレイ "PROJ1" の[編集]ボタンをクリックしてください。すべて順調。
4. 私は
5. 「Proj1pezxde1」のようないくつかのランダムな文字列を追加することにより、入力を変更するには、テキスト入力は、私がいないクリックSaveボタンを行う今「Proj1pezxde1」
6. です。
7. 私はモーダルを閉じます。
8. "Proj1"と表示されます。はい。
9. 私は

10テキスト入力は、私は、オブジェクトを変更しなかったにもかかわらず、「Proj1pezxde1」である最初の行の[編集]ボタンをクリックします。

テキスト入力は、再び（私はこのモーダルを開くたびに）オブジェクトからデータを読み込むため、私は修正したい問題だ「PROJ1」

が表示されます。少し不正確になって申し訳ありません。

Answer 1

説明を読んだ後、リピーターとして使用されているプロジェクトのリストがあり、各プロジェクトデータをテキストボックスとボタンにバインドしたいとします。

あなたのプロジェクトオブジェクトを次のように初期化しようとしましたか？

$scope.projects = [ 
     { 'name': 'proj1', 'id': '1' }, 
     { 'name': 'proj2', 'id': '2' } 
    ]; 

は、次に、あなたのデータ

<div ng-repeat="project in projects"> 
    <div> 
     <input type="text" class="form-control" ng-model = "project.name"> 
     <button type="button" class="btn pull-right btn-primary btn-md" ng-click="edit(project)" data-dismiss="modal" >Save</button> 
    </div> 
</div> 

Answer 2

プロジェクトのコピーである第2の目的を使用している私の意見では、これを行うための最も簡単な方法を表示するには、以下のような何かを、とすることができます変更を元のプロジェクトオブジェクトに適用した後で確認します。例えば

、コントローラの簡単な「擬似コード」：

function MyCtrl($scope) { 
    $scope.projects = [...]; 
    $scope.currentProject = null; 

    $scope.edit = function(project) { 
     $scope.currentProject = angular.copy(project); // This will create a copy so the changes in $scope.currentProject will not reflect. 
     // Open dialog with input bound to $scope.currentProject 
     if (confirm) { 
      // Assign all properties from currentProject to project 
      angular.extend(project, $scope.currentProject); 
     } 
    } 
} 

Answer 3

私はあなたの質問から理解して、あなたはそれが保存されている場合のみ、プロジェクトデータを更新する必要があります。これを行うには、更新される実際のオブジェクトのコピーを以下のように保存することができます。

ここでは、ソースオブジェクトのディープコピーを使用していますangular.copy()を使用しています。

$scope.original = {name : "xyz"}; 
$scope.project = angular.copy(original); 

//Call this when the user confirms to save , here we are replacing the 
//original copy with the latest object that needs to be saved. 

$scope.save = function() { 
    $scope.original = angular.copy($scope.project); 
} 

//Call this when closing the modal or clicking cancel or when losing  
//focus, this will reset the changes to the original copy. 

$scope.reset = function() { 
    $scope.project = angular.copy(original); 
} 

Answer 4

あなたはモーダルコントローラ内のプロジェクトオブジェクトのコピーを作成して保存があるときにのみ突出したモーダル

$scope.copyProj = angular.copy($scope.project); 

コピーオブジェクトのプロパティを割り当てるの入力要素にバインドするために、このオブジェクトを使用することができますクリックした