2016-07-27 14 views
0

同じ情報を追加したいときは、重複行のエラーが発生します。AngularJS重複行エラー

この問題は$ scope.showSalとng-repeat = "showSalの行"から発生します。

ng-repeat = "$ indexでshowSalトラックの行"を使用すると、重複する行を追加できません。

重複を解析して追加する方法は?私はJSONデータを作成しようとしましたが、stringifyを使用しても解析メソッドを解析してもエラーが発生します...おそらく、解析がうまく実装されていません...

PS:オブジェクトの配列を解析する必要があります。

HTMLファイル:

のJavaScriptファイル
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Research project</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script src="js/app/research.js"></script> 
    </head> 
    <body ng-app="testApp" ng-controller="mainCtrl"> 
     <table> 
      <thead> 
       <tr> 
        <th>Nr.</th> 
        <th>An</th> 
        <th>Den</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="rows in showSal"> 
        <td>{{rows.id}}</td> 
        <td>{{rows.an}}</td> 
        <td>{{rows.den}}</td> 
       </tr> 
      </tbody> 
     </table> 

     <form id="add-content" ng-controller="addInfoCtrl" ng-submit="addInfoDb()"> 
       <br/> 
       <div class="controls"> 
         <button type="submit" style="width: 220px;">Adauga salariu</button> 
       </div> 
     </form> 
    </body> 
</html> 

var app = angular.module("testApp", []); 

app.controller('mainCtrl', ['$scope', '$sce', '$document', function($scope, $sce, $document) { 
    $scope.showSal = [ 
     { id: '1', an: '2016', den: 'Oracle' }, 
     { id: '2', an: '2016', den: 'Oracle' } 
    ]; 
}]); 

app.controller('addInfoCtrl', ['$scope', function($scope) { 
    $scope.testAdd = { id: '100', an: '2016', den: 'Oracle' } 

    $scope.addInfoDb = function() { 
     $scope.showSal.push($scope.testAdd); 
     console.log($scope.showSal.length); 
    } 
}]); 
+0

、へ

$scope.showSal.push($scope.testAdd); 

を交換してください、おそらく 'angular.copy(objToCopy)' – jusopi

+0

の 'track by $ index'を使ってうまく動作しますhttps://jsbin.com/vufidedoti/edit?html,js,output – jusopi

答えて

1

Error: ngRepeat:dupes Duplicate Key in Repeater

track by $index

ng-repeat="rows in showSal track by $index" 

Doc

を追加します。
+0

私がここに投稿したプロジェクトのほうが大きく、トラック付き$ index 'によって、うまくいきませんでした。なぜか分かりませんが、@ Yuva Rajのソリューションではとてもうまく動作します。 – Doro

+0

@Doroこれは本当にあなたが選んだものよりも良い答えです。 'angular.copy()'関数は、あなたが渡しているものの深いコピーを作成します。これは、メモリと時間の両方の効率が高くなります。 'track by $ index'は単に' ng-repeat'の反復の間に別の識別子を指定し、自由に追加アクセシビリティをスローします。 'track by $ index'がうまく動作しない場合、おそらく効率の悪いルートを使うのではなく、使い方を乱してしまいます。 –

+0

ヒューマンエラー....非常に大きなエラー:) ...私は別のng-repeatタグを変更していましたが、もちろん、どのように問題を解決することができませんでした:) – Doro

0

、あなたは$ index`で `トラックを使用する必要がありますし、あなたの*の追加*関数の中で、あなたが実際に重複したオブジェクトを作成する必要があり

$scope.showSal.push(angular.copy($scope.testAdd)); 

Here's the working FIDDLE

+0

ありがとう、それは非常に良い動作します。 – Doro