Aktualisieren und Löschen eines Datensatzes innerhalb des Objekts

Question

Ich versuche ein System zu erstellen, in dem ich Informationen über Spieler und Teams anzeigen, bearbeiten und löschen kann, indem ich angular zusammen mit einer RESTful-API verwende. Ich habe die Teile in Betrieb, in denen ich alle Daten zeige und Daten in die Datenbank posten.

Der Teil, mit dem ich Probleme habe, ist die Aktualisierung von Daten, da ich es nicht schaffen kann, den HTTP-Putt mit den richtigen Daten arbeiten zu lassen.

HTML

<script type="text/ng-template" id="team-single.html"> 
    <div class="team-box"> 
     <div class="badge"> 
      <img ng-src="images/{{x.club_name}}.png" width="100" height="100"></div> 


<div ng-hide="editorEnabled"> 
    <div class="team-name">{{x.club_name}}</div> 
     <p><b>Manager:</b> {{x.club_manager}}</p> 
     <p><b>Ground:</b> {{x.club_ground}}</p> 
     <p><b>Nickname:</b> {{x.club_nickname}}</p> 
     <div class="team-p">{{x.club_info}}</div> 
    <a href="#" ng-click="editorEnabled=!editorEnabled">Edit Team</a> 
</div> 
<div ng-show="editorEnabled"> 
    <p><input ng-model="x.club_name"></p> 
    <p><input ng-model="x.club_manager"></p> 
    <p><input ng-model="x.club_ground"></p> 
    <p> <input ng-model="x.club_nickname"></p> 
    <p><input ng-model="x.club_info"></p> 
    <input type="hidden" name="id" ng-value="" /> 
    <a href="#" ng-click="editorEnabled=!editorEnabled; updateTeam($index)">Save</a> 
     </div> 

</script> 

<div class="row teams"> 
      <div class="container"> 
       <div class="col-md-4" ng-repeat="x in teams" ng-include="'team-single.html'"></div> 
      </div> 

JS

var app = angular.module('footballApp', []); 

app.controller("TeamCtrl", function ($scope, $http) { 

    $scope.updateTeam = function() { 
    $http({ 
     method: 'PUT', 
     url: 'clubs.php/teams/' + id, 
     data: ??, 
     headers: { 
      'Content-Type': 'application/x-www-form-urlencoded' 
     } 
    }); 
}; 
}); 

Ich habe einen Editor auf dem Front-End aktiviert die Felder zu bearbeiten. Ich weiß nicht, wie ich das eine Objekt, das bearbeitet wird, zurück in die updateTeam-Funktion übergebe, ohne das gesamte Team-Array zu übergeben.

Auch in der HTTP-PUT muss ich das ID-Feld des entsprechenden Clubs in der URL verwenden, aber ich bin mir nicht sicher, wie man das zurücksendet.

Jede Hilfe würde sehr geschätzt werden.

Answer 1

Um Ihr Problem zu lösen, müssen Sie möglicherweise Ihre Benutzeroberfläche überdenken. Warum möchten Sie die Bearbeitungsoption für alle Teams auf einmal in der Benutzeroberfläche anzeigen? Idealerweise sollten Sie die Teamdetails zusammen mit einer Option zum Bearbeiten anzeigen.

Wenn Benutzer auf edit klicken, rufen Sie eine Funktion mit team Daten auf und zeigen Sie dann ein Formular an, in dem diese Details bearbeitet werden können und später für die Einreichung gesendet werden können.

Siehe dieses plnkr Beispiel https://plnkr.co/edit/muqnmIhO77atLyEHS9y7?p=preview

<div class="row"> 
    <div class="col-xs-6 col-lg-4" ng-repeat="team in teams"> 
    <h2>{{ team.club_name }}</h2> 
    <p>{{ team.club_info }}</p> 
    <p><a class="btn btn-default" ng-click="onEditDetails(team)" href="javascript:void(0);" role="button">Edit details »</a></p> 
    </div> 
</div> 

und dann in der Steuerung

$scope.onEditDetails = function(team) { 
    $scope.team = team; 
}; 

Dies gibt Ihnen die Referenz der aktuell ausgewählte Teams. Sie können $scope.team dann verwenden, um eine form in UI anzuzeigen, die zusammen mit seinen neuen bearbeiteten Daten übermittelt werden kann.

Hinweis: In Ihrem Beispiel Sie verwenden eine Vorlage in HTML in UI zu zeigen, aber da sie in einem ng-repeat jedes Ihrer Vorlage sind die last Variable Schleife werden. Eine Vorlage mit ng-include erstellt keinen anderen Bereich für jede Ihrer team in teams.

Wenn Sie wiederverwendbare HTML erstellen (wenn auch un-nötig wie pro Ihre Anforderung) Sie directive erstellen und es in Ihrem ng-repeat als <my-team-directive data="x"></my-team-directive>