同じ情報を追加したいときは、重複行のエラーが発生します。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);
}
}]);
、へ
を交換してください、おそらく 'angular.copy(objToCopy)' – jusopi
の 'track by $ index'を使ってうまく動作しますhttps://jsbin.com/vufidedoti/edit?html,js,output – jusopi