AngularJSの既存のテーブル行をコピー

Question

私は編集と削除ボタンがあるテーブルを持っています。でも今はクローンボタンを作っています。

クローンボタンは、次のように機能するはずです。クローンボタンは、ユーザーがクリックした行からほぼすべてのデータ（取得できないIDなどのデータ）をクローンします。次に、編集ページに移動し、入力/選択値のデータを入力します。

しかし、私はこれをどのようにするのか分かりません。 私は今、すべてのデータ出力機能があります：var cloneJob = angular.extend(job);

が、それは編集ページへlocation.href = '#/jobs/add'; 行くしかし、問題は、彼が入力/選択値を満たしていないということです。 AngularJSにはこの機能がありますか？そして私は正しい道を歩いているのですか、何か他のことをする必要がありますか？

<tr ng-repeat="job in (filtered.rows = (jobs | orderBy: orderByDate:true | filter:filterByActive | filter:filter.query)) | skip:pagination.pageSkip() |limitTo:pagination.perPage" ng-class="{ inactive : !job.active }" style="cursor: pointer;"> 
    <td> 
     <span ng-bind="job.title"></span> 
    </td> 
    <td> 
     <span ng-bind="job.client.name"></span> 
    </td> 
    <td> 
     <span ng-bind="job.referenceNumber"><span> 
    </td> 
    <td> 
     <span ng-bind="job.creationDate"><span> 
    </td> 
    <td> 
     <a ng-href="#/jobs/edit/{{job.id}}/tab/candidates" ng-bind="job.candidates.length"></a> 
    </td> 
    <td> 
     <span class="status" ng-class="job.status.value"></span> 
    </td> 
    <td> 
     <a ng-if="job.active" ng-href="#/jobs/edit/{{job.id}}" class="icon go"> 
      <span class="tooltip" translate="job_name_details"></span> 
     </a> 
     <a ng-if="job.active" class="icon close" ng-click="showClosePopup(job)"> 
      <span class="tooltip" translate="job_close"></span> 
     </a> 

     <a ng-click="cloneJob(job)" ><span>Clone!</span></a> 
     <!-- <button data-ng-click="cloneItem(food)" class="btn inline">Add</button> --> 

    </td> 
</tr> 

機能cloneJobは次のとおりです：

$scope.cloneJob = function (job){ 
    var cloneJob = angular.extend(job); 
    location.href = '#/jobs/add'; 
} 

これは出力これは私のテーブルの私のコードです

：ここでUPDATE

はlitleもう少しコードですjson（たくさんの正しいデータ）がたくさんあり、それは追加ページに行きます。

Answer 1

<tr ng-repeat="whatever in whatevers"><button ng-click="duplicateItem(whatever)">duplicate</button></tr> 

とコントローラのようなものを試してみてください：

$scope.duplicateItem = function(item){ 
    $scope.duplicatedItem = angular.copy(item); //this will do a copy, not just assign a reference. 
    //if you need clean the duplicate item 
    delete $scope.somePropertyYouWannaClean; 
} 

あなたは実施例フィドル、あるいは少なくともそれ以上のコードを提供する場合、それが良いだろう、私たちはあなたに、より正確な答えを与えることができます。

編集：clone機能はサービス（または工場、シングルトン）に情報をロードさせることであろう

きれいな方法。その後、ルートをロードした後、サービスを使用してコンテンツを取得し、再生します。

同様：

angular.module('some.namespace.factory', []) 
    .factory('CloneJobFactory', function() { 
     return { 
      job: null, 
      loadJob: function (job) { 
       var auxJob = angular.copy(job);//if you just need a shallow copy use angular.extend 
       this.job = this.cleanJob(auxJob); 
      }, 
      getClonedJob: function(){ 
       return this.job; 
      }, 
      cleanJob: function(job) { 
       //code that cleans a job object that has been cloned 
       delete job.propertyYouDoNotWantToKeep; 

       return job;//return the cleaned job 
      } 
     }; 
    }); 

そして、（それは今がちょうど作っ工場を注入しなければならない）だけラップloadJob方法にありコントローラになりclone機能：

$scope.cloneJob = function (job) { 
    CloneJobFactory.loadJob(job); 
} 

clを使用する機能と同じですonedデータ：

$scope.someFunction = function (whateverParams) { 
    var clonedJob = CloneJobFactory.getClonedJob(); 
    //whatever you want 
} 

これは改善することができます。

注：：角度シングルトンは、コントローラ、サービスなどの間で情報を共有するために作られています。

Answer 2

あなたの「追加」ルートと同じコントローラとビューを使用していますが、クローン化されるべきジョブのIDを渡し新しい「クローン」のルートを、行います

.when('/jobs/add', { templateUrl: 'jobs/add', controller: 'AddController' }) 
.when('/jobs/clone/:id', { templateUrl: 'jobs/add', controller: 'AddController' }) 

その後、中AddController、$ routeParamsを使用してIDが渡されたかどうかを確認します。 idがある場合は、idでジョブをフェッチし、ジョブを複製してモデルを初期化します。 idがない場合は、モデルを空のジョブで初期化します。