2016-07-27 3 views
0

Когда я хочу добавить ту же информацию, это согреет мне ошибку дублирования строки.Ошибка дублирования строк AngularJS

Эта проблема возникает из $ scope.showSal и ng-repeat = "rows in showSal".

Если я использую ng-repeat = "строки в треке showSal по индексу $" Я не могу добавить повторяющиеся строки, и мне это нужно.

Как я могу разобрать и добавить дубликаты? Я пытался сделать данные JSON, но я ошибаюсь, даже если я использую метод stringify и parse ... возможно, я не слишком хорошо реализовал разбор ...

PS: Мне нужно разобрать массив объектов.

HTML файл:

<!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> 

JavaScript файла:

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

Вы должны использовать 'трек $ index' и в вашей * оных * функция, вам нужно на самом деле создать дубликат объекта , может быть, как '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

Заменить

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

к,

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

Here's the working FIDDLE

+0

Спасибо, что работает очень хорошо. – Doro

Смежные вопросы