angularjs push to array adding ten elements

Question

I'm new to AngularJS, and this has been driving me nuts for several days. HELP!!! I've condensed the problem into as simple a code snippet as I could.. I've set up an array called indexArray in the Controller, and I want to push values to it from HTML via the function pushIndex(). The problem is that the push function adds ten identical elements to the array. When I list the array with the {{indexArray}} statement after the push, it looks like this:

[4,5,6,7,9,9,9,9,9,9,9,9,9,9]

Where I only wanted one "9" pushed, it added ten of them.

The same thing happens with strings, quotes, etc.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script> 
var app = angular.module('myDataApp',[]);
app.controller('myDataController',function($scope, $http){
    $scope.indexArray=[4,5,6,7];
    $scope.pushIndex=function(num){
        $scope.indexArray.push(num);
   };
});
</script>
</head>
<body>
<div ng-app="myDataApp" ng-controller="myDataController">
{{ pushIndex(9) }}
{{ indexArray }}
</div>
</body>
</html>

Sorry in advance if the solution is painfully simple or this question has been asked before. Thanks! -UDM

This kind of angular expressions are ment to be side-effect free and angular will call your {{ pushIndex(9) }} expression many, many times (it won't even stop at 10). See this question for example. — noppa
– noppa, Commented Jul 28, 2016 at 22:17

Adam Harrison · Accepted Answer · 2016-07-28 22:22:36Z

3

Calling a function like this {{ pushIndex(9) }} will run the digest loop infinitely.

This will work for you instead

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script> 
var app = angular.module('myDataApp',[]);
app.controller('myDataController',function($scope, $http){
    $scope.indexArray=[4,5,6,7];
    $scope.pushIndex=function(num){
        $scope.indexArray.push(num);
   };
});
</script>
</head>
<body>
<div ng-app="myDataApp" ng-controller="myDataController">
<span ng-init="result=pushIndex(9)">{{result}}</span>
{{ indexArray }}
</div>
</body>
</html>

answered Jul 28, 2016 at 22:22

Adam Harrison

3635 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

uranusdemilo Over a year ago

Thanks! This works like a charm, and ended five days of SHEER FRUSTRATION :-)

Adam Harrison Over a year ago

If you can please up vote and select this as the answer to this question, it would be much appreciated.

Collectives™ on Stack Overflow

angularjs push to array adding ten elements

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related