Verwenden Sie die Daten von ng-repeat

Question

Ich kann eine Tabelle von Benutzern aus meiner Datenbank in meiner Webanwendung mithilfe von ng-Repeat anzeigen. Ich kann direkt aus der Webanwendung hinzufügen und löschen, aber jetzt versuche ich Informationen über diese Benutzer zu aktualisieren. Ich möchte auf eine Schaltfläche in der Zeile des Benutzers klicken (jede Zeile zeigt Informationen für einen Benutzer an, 1 Zeile = 1 Benutzer), wenn ich auf diese Schaltfläche klicke Ich möchte ein Formular mit Eingabefeldern erstellen, die mit tatsächlichen Werten gefüllt sind. Ich kann nur Informationen über meine Benutzer erhalten, indem ich auf diesen Knopf klicke, aber ich weiß nicht, wie ich Informationen zu diesem Formular "sende".

Meine Tabelle der Benutzer:

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

Aber so etwas wie dies gar nicht funktioniert:

<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

Wenn Sie Verwenden Sie dieses Synthax, Ihr Formular muss in Ihrem ngRepeat sein. Es ist nicht der beste Weg, es zu tun, da Sie ein Formular für Benutzer haben werden.

Ich würde Ihnen etwas anderes vorschlagen. In Ihrem Controller, stellen eine edit() Funktion:

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

Wenn ein Benutzer in der Tabelle klicken, rufen Sie den Bearbeitungs() Funktion:

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

Sie jetzt in Form des editedUser Objekt bearbeiten können:

<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

Was können Sie Folgendes tun ist:

<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

Legen Sie die beiden Eingangs und Spanne HTML-Direktive in <td> und verwenden ng-switch: ng-switch-when & ng-switch-default, um nur ein Feld anzuzeigen.

<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> 

Sie benötigen eine eigene Richtlinie für it.Reason schreiben benutzerdefinierte Richtlinie für das Schreiben ist der Wert von ng-switch mit einzelnen assoziieren statt global.

Im letzten <td> Tag hinzufügen: die bearbeiten und aktualisieren Schaltflächen enthält:

<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.editItem = function(oldData) { 
     $scope.edit = angular.copy(oldData); 
     $scope.mode = "edit"; 
    } 

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

Der Wert der Input-Feld aktualisiert wird mit
$scope.edit = angular.copy(oldData); in editItem() Funktion.

Mit der Verwendung von Ereignisemittern ändern Sie das Hauptobjekt.

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

Verwendung angular.copy zu tiefem Klon Wert stattdessen Wert als Referenz zu übergeben.

prüfenhttp://codepen.io/sumitridhal/pen/YVPQdW

Answer 4

Ich denke, dass Sie eine Art Master-Detail ui Muster sprechen.

Hier ist es eine öffentliche plunker, die diese Art von Problem lösen wird