Pushing item into array

64 views
Skip to first unread message

Anusha Iyengar

unread,
Jun 12, 2015, 3:43:02 AM6/12/15
to ang...@googlegroups.com
Hi,

I'm rather new to AngularJS and JavaScript, and I'm in the process of learning them. So I was tinkering around a little bit trying to understand different concepts and this is one that's driving me crazy. I'm calling the addcomment() function from a html file. The function gets called, but everytime i want this code to display:

 <p ng-repeat="x in messages">{{x}}<br></p>

It displays to me only one "Hi"

I want a new "hi" to be pushed into my array everytime I call the function from the HTML file. That is, if the function addcomment() has been called 5 times, then I want 5 "hi" in my array called messages[]. It seems to me that everytime I call the function, the array gets reinitialised to empty array. How do I go around this?

This is the code:

.controller('Ctrl',function($scope){

$scope.messages=[""];

$scope.addcomment = function(){
$scope.messages.push("Hi");
}

And this is how I'm going about with the HTML:

<button  ng-click="addcomment()">Submit</button>
 <p ng-repeat="x in messages">{{x}}
<br>
</p>

Yogesh N

unread,
Jun 12, 2015, 6:51:57 AM6/12/15
to ang...@googlegroups.com
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys

for complete details, click the below
https://docs.angularjs.org/error/ngRepeat/dupes?p0=x%20in%20messages&p1=string:Hi&p2=Hi


Use this code:
<button  ng-click="addcomment()">Submit</button>
 <p ng-repeat="x in messages track by $index">{{x}}
<br>
</p>


Anusha Thothathri

unread,
Jun 16, 2015, 5:28:51 AM6/16/15
to ang...@googlegroups.com
I tried it out but it didn't work either. :) 
Is there another way altogether??

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/mZR_svp6P-0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Jérôme B

unread,
Jun 16, 2015, 6:50:19 AM6/16/15
to ang...@googlegroups.com
#index.html#
<html >
  <head>
    <script src="script.js"></script>
  </head>
  <body ng-app="myapp">

    <div ng-controller="Ctrl">
      <button  ng-click="addcomment()">Submit</button>
      <p ng-repeat="x in messages track by $index">{{x}}</p>
    </div>
  </body>
</html>

#script.js#
var app = angular.module('myapp', []);
app.controller('Ctrl', function($scope){
  $scope.messages=[];
  $scope.addcomment = function(){
   $scope.messages.push("Hi");
  }
});

Try to compare with this

Sander Elias

unread,
Jun 16, 2015, 7:31:01 AM6/16/15
to ang...@googlegroups.com
Hi Anusha,

Try to avoid using $scope, you seldom need it anyway. for detail on that, read trough the styleguide

Regards
Sander

Yogesh N

unread,
Jun 17, 2015, 1:39:36 AM6/17/15
to ang...@googlegroups.com
Hi Anusha Iyengar

Try this it will work

Here is controller code:
.controller('Ctrl',function($scope){

$scope.messages=[];

$scope.addcomment = function(){
$scope.messages.push("Hi");
};
});

Here is the html code:

<div ng-controller="Ctrl">

       <button ng-click="addcomment()">Submit</button>
           <p ng-repeat="x in messages track by $index">
             {{x}}
           <br>
          </p>

      </div>

Anusha Thothathri

unread,
Jun 17, 2015, 1:57:54 AM6/17/15
to ang...@googlegroups.com
Thank you everyone. :) I'll try it all out and see if they work.
Reply all
Reply to author
Forward
0 new messages