オブジェクト内のレコードを1つ更新して削除する

Question

RESTfulなAPIとともに角度を使ってプレイヤーやチームの情報を表示、編集、削除できるシステムを作成しようとしています。私はすべてのデータを表示し、データをデータベースに投稿する部分を持っています。

私が問題を抱えているのは、正しいデータが送信されている状態でhttp putを処理できないため、データを更新することです。

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' 
     } 
    }); 
}; 
}); 

私はフィールドを編集するために、フロントエンドにエディタを有効にしています。チームアレイ全体を渡していないうちに、編集対象の1つのオブジェクトをupdateTeam関数に渡す方法がわかりません。

また、HTTP PUTでは、URLに関連するクラブのIDフィールドを使用する必要がありますが、これを返信する方法がわかりません。

ご協力いただければ幸いです。

Answer 1

問題を解決するには、UIを再考する必要があります。なぜあなたはUIで一度にすべてのチームの編集オプションを表示したいのですか？理想的には、チームの詳細を編集するオプションとともに表示する必要があります。

ユーザーがeditをクリックすると、teamデータで機能を呼び出し、それらの詳細を編集して後で送信するためのフォームを表示します。コントローラ

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

で

このplnkr例を参照してください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> 

、その後、これはあなたの現在の選択したチームのリファレンスを提供します。 $scope.teamを使用して、formをUIに表示することができます。これは、新しい編集データと共に提出することができます。

注：あなたの例では、UIにHTMLを表示するためにテンプレートを使用しているが、それらはng-repeatにあるので、あなたのテンプレートのそれぞれはループのlast変数を使用することになります。 ng-includeを使用してテンプレートを含めると、teamのそれぞれに異なる範囲が作成されず、teamsになります。

あなたがdirectiveを作成することができます（あなたの要件ごととして不必要なのに）、再利用可能なHTMLを作成したいとあなたは[ngChnage]（httpsを追加することができ、あなたのng-repeat