Receive an error in console when submit the form with two similar consecuative values using angularJS

Question

I am trying to append the form submit using Angular but I receive an error when I submit more than one consecutive similar values. For example if I submit "John" and then try to submit another "John" the program crashes. Can someone explain it to me? and a tip how to fix it?

*Also can anyone tell me how to append the results in one line?

angular.module("displayText", [])
  .controller("submitText", function($scope) {
    $scope.outputArr = [];
    $scope.print = function() {

      $scope.outputArr.push($scope.inputText);
      $scope.inputText = '';
    };
  });

<html ng-app="displayText">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>

<body ng-controller="submitText">

  <div>

    <form method="get">
      <input type="text" name="post" ng-model="inputText" required/>
      <button ng-click="print(inputText)">Submit</button>
    </form>

    <div id="page">
      <p ng-repeat="text in outputArr">{{text}}</p>
    </div>

  </div>

</body>

</html>

score 2 · Accepted Answer · answered Dec 12 '14 at 10:29

ng-repeat can't handle duplicate values.

you have to change

   <p ng-repeat="text in outputArr">{{text}}</p>

to

<p ng-repeat="text in outputArr track by $index">{{text}}</p>

and the <p> element to <span> for one line visualization.

<span ng-repeat="text in outputArr track by $index">{{text}} </span>

Here is the simpliest solution to your problem:

angular.module("displayText", [])
  .controller("submitText", function($scope) {
    $scope.outputArr = [];
    $scope.print = function() {

      $scope.outputArr.push($scope.inputText);
      $scope.inputText = '';
    };
  });

<html ng-app="displayText">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>

<body ng-controller="submitText">

  <div>

    <form method="get">
      <input type="text" name="post" ng-model="inputText" required/>
      <button ng-click="print(inputText)">Submit</button>
    </form>

    <div id="page">
      <span ng-repeat="text in outputArr track by $index">{{text}} </span>
    </div>

  </div>

</body>

</html>

i've found a post about this: http://stackoverflow.com/questions/16296670/angular-ng-repeat-error-duplicates-in-a-repeater-are-not-allowed — hayatoShingu, Dec 12 '14 at 10:30

score 2 · Answer 2 · answered Dec 12 '14 at 10:32

Or you can wrap your item value into an object

angular.module("displayText", [])
  .controller("submitText", function($scope) {
  
    $scope.outputArr = [];
  
    $scope.print = function() {
      $scope.outputArr.push({
        text : $scope.inputText
      });
    };
  });

<html ng-app="displayText">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>

<body ng-controller="submitText">

  <div>

    <form method="get">
      <input type="text" name="post" ng-model="inputText">
      <button ng-click="print(inputText)">Submit</button>
    </form>

    <div id="page">
      <p ng-repeat="entry in outputArr">{{entry.text}}</p>
    </div>

  </div>

</body>

</html>

Receive an error in console when submit the form with two similar consecuative values using angularJS

2 Answers2