ng-repeatのデータを使用

Question

ng-repeatを使用して、自分のWebアプリケーションのデータベースからユーザーのテーブルを表示できます。 Webアプリケーションから直接追加したり削除したりすることはできますが、今はそれらのユーザーに関する情報を更新しようとしています。このボタンをクリックすると、実際の値で入力フィールドが入力されたフォームを作成したいと考えています（各行は1人のユーザー、1行= 1ユーザーの情報を表示します）。 私はこのボタンをクリックするだけで私のユーザーに関する情報を得ることができますが、このフォームに情報を "送信"する方法はわかりません。

ユーザーのマイテーブル：

<tr ng-repeat="user in users"> 
... 
</tr> 

しかし、このようなものは全く機能していません。

<form> 
    <label>Name</label> 
    <input type="text" id="up_name" ng-model="user.name"/> 
    <label>Age</label> 
    <input type="text" id="up_age" ng-model="user.age"/> 
    ... 
</form> 

Answer 1

あなたの場合このシンタックスを使用している場合、あなたのフォームはあなたのngRepeatになければなりません。それはあなたがユーザーのためのフォームを持っているので、それを行うための最善の方法ではありません。

私はあなたに何か異なるものをお勧めします。

<tr ng-repeat="user in users" ng-click="edit(user)"> 
    ... 
</tr> 

あなたは今の形でeditedUserオブジェクトを編集することができます：あなたのテーブルでユーザをクリックすると

が

$scope.edit = function(user) { 
    $scope.editedUser = user; 
} 

、編集（）関数を呼び出します。

あなたのコントローラでは、 edit()機能を設定します

<form ng-if="editedUser"> 
    <label>Name</label> 
    <input type="text" id="up_name" ng-model="editedUser.name"/> 
    <label>Age</label> 
    <input type="text" id="up_age" ng-model="editedUser.age"/> 
    ... 
</form> 

Answer 2

あなたは何ができるか、次のされています

<tr ng-repeat="user in users" ng-init="selectedUser = null"> 
    <td> {{ user.name }}</td>... <td ng-click="selectedUser = user"> edit </td> 
</tr> 

<div ng-if="selectedUser"> 
    <form> 
    <label>Name</label> 
    <input type="text" id="up_name" ng-model="user.name"/> 
    <label>Age</label> 
    <input type="text" id="up_age" ng-model="user.age"/> 
    ... 
    </form> 

</div> 

Answer 3

<td>での入力とスパンの両方のHTMLディレクティブを挿入し、ng-switchを使用します。ng-switch-when & ng-switch-defaultには1つのフィールドしか表示されません。カスタムディレクティブを記述するためのit.Reasonのカスタムディレクティブを記述する必要が

<td class="sorting_1" ng-switch="mode"> 
    <input type="text" class="form-control small" ng-switch-when="edit" id="edit" ng-model="edit.username"> 
    <span ng-switch-default id="item.username">{{item.username}}</span> 
</td> 

はng-switchの値は、個々の代わりに、グローバルに関連付けるしますです。編集、更新ボタンが含まれます：

<td ng-switch="mode"> 
    <button class="btn btn-success btn-xs edit" ng-switch-when="edit" ng- 
    click="updateItem(edit, index)"> 
    <i class="fa fa-floppy-o"></i> 
    </button> 
    <button class="btn btn-success btn-xs" ng-switch-default ng- 
    click="editItem(item)"> 
    <i class="fa fa-pencil-square-o "></i> 
    </button> 
</td> 

JS入力ボックスの値がに
$scope.edit = angular.copy(oldData);を使用して更新されます

$scope.editItem = function(oldData) { 
     $scope.edit = angular.copy(oldData); 
     $scope.mode = "edit"; 
    } 

    $scope.updateItem = function(data, index) { 
     $scope.$emit('update', data, index); 
     $scope.mode = "default"; 
    } 

最後<td>タグの追加

editItem()機能。

イベントエミッタの使用により、メインオブジェクトが変更されます。

$scope.$on('update', function(event, data, index) { 
    angular.copy(data, $scope.items[index]); 
    }); 

angular.copyを使用して値を参照として渡す代わりに、深いクローン値を使用してください。

チェックhttp://codepen.io/sumitridhal/pen/YVPQdW

Answer 4

私はあなたが主従 UIパターンの一種について話していると思います。

ここでは、この種の問題を解決する公開plunkerです。