How to push object into an array using AngularJS

Question

I am trying to do use the angular push function but it is not working.

I want to add strings (or objects) into an array.

I searched for basic examples here at Stack Overflow but I couldn't find it.

Can anyone correct my code or write a very basic example?

Here is my example.

This is the HTML code:

<form ng-controller="TestController as testCtrl ng-submit="testCtrl.addText(myText)"> <input type="text" value="Lets go"> <button type="button">Add</button> </form>

This is the Java Script code:

(function() { var app = angular.module('test', []); app.controller('TestController', function() { this.arrayText = { text1: 'Hello', text2: 'world', } this.addText = function(text) { arrayText.push(this.text); } }); })();

Not sure what you're asking, but this.arrayText is an object, it has no push, and it's not the same as just arrayText ? — adeneo, CommentedMay 27, 2015 at 13:56
<form ng-controller="TestController as testCtrl ng-submit="testCtrl.addText(myText)"> Is this correct? missing a "? (also, arrayText has an extra comma). — briosheje, CommentedMay 27, 2015 at 14:00

Anik Islam Abhi · Accepted Answer · 2016-02-09 17:50:12Z

Push only work for array .

Make your arrayText object to Array Object.

Try Like this

JS

this.arrayText = [{ text1: 'Hello', text2: 'world', }]; this.addText = function(text) { this.arrayText.push(text); } this.form = { text1: '', text2: '' };

HTML

<div ng-controller="TestController as testCtrl"> <form ng-submit="addText(form)"> <input type="text" ng-model="form.text1" value="Lets go"> <input type="text" ng-model="form.text2" value="Lets go again"> <input type="submit" value="add"> </form> </div>

Button type should be submit.
– User2
CommentedMay 27, 2015 at 14:50 — User2, CommentedMay 27, 2015 at 14:50

User2 · Accepted Answer · 2016-08-27 06:34:40Z

Please check this - http://plnkr.co/edit/5Sx4k8tbWaO1qsdMEWYI?p=preview

Controller-

var app= angular.module('app', []); app.controller('TestController', function($scope) { this.arrayText = [{text:'Hello',},{text: 'world'}]; this.addText = function(text) { if(text) { var obj = { text: text }; this.arrayText.push(obj); this.myText = ''; console.log(this.arrayText); } } });

HTML

<form ng-controller="TestController as testCtrl" ng-submit="testCtrl.addText(testCtrl.myText)"> <input type="text" ng-model="testCtrl.myText" value="Lets go"> <button type="submit">Add</button> <div ng-repeat="item in testCtrl.arrayText"> <span>{{item}}</span> </div> </form>

jreyes · Accepted Answer · 2015-05-27 14:26:09Z

'Push' is for arrays.

You can do something like this:

app.js:

(function() { var app = angular.module('myApp', []); app.controller('myController', ['$scope', function($scope) { $scope.myText = "Let's go"; $scope.arrayText = [ 'Hello', 'world' ]; $scope.addText = function() { $scope.arrayText.push(this.myText); } }]); })();

index.html

<!doctype html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="app.js"></script> </head> <body> <div> <form ng-controller="myController" ng-submit="addText()"> <input type="text" ng-model="myText" value="Lets go"> <input type="submit" id="submit"/> <pre>list={{arrayText}}</pre> </form> </div> </body> </html>

Arun Saini · Accepted Answer · 2016-09-23 17:18:33Z

 var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { //Comments object having reply oject $scope.comments = [{ comment: 'hi', reply: [{ comment: 'hi inside commnet' }, { comment: 'hi inside commnet' }] }]; //push reply $scope.insertReply = function (index, reply) { $scope.comments[index].reply.push({ comment: reply }); } //push commnet $scope.newComment = function (comment) { $scope.comments.push({ comment:comment, reply: [] }); } });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <!--Comment section--> <ul ng-repeat="comment in comments track by $index" style="background: skyblue; padding: 10px;"> <li> <b>Comment {{$index}} : </b> <br> {{comment.comment}} <!--Reply section--> <ul ng-repeat="reply in comment.reply track by $index"> <li><i>Reply {{$index}} :</i><br> {{reply.comment}}</li> </ul> <!--End reply section--> <input type="text" ng-model="reply" placeholder=" Write your reply." /><a href="" ng-click="insertReply($index,reply)">Reply</a> </li> </ul> <!--End comment section --> <!--Post your comment--> <b>New comment</b> <input type="text" placeholder="Your comment" ng-model="comment" /> <a href="" ng-click="newComment(comment)">Post </a> </div>

hi, This answer really helped to me , but I need to add remove reply and comment button too . how can I do that? — aydcery, CommentedJan 14, 2022 at 15:43

Joshua Kelly · Accepted Answer · 2015-05-28 04:06:01Z

A couple of answers that should work above but this is how i would write it.

Also, i wouldn't declare controllers inside templates. It's better to declare them on your routes imo.

add-text.tpl.html

<div ng-controller="myController"> <form ng-submit="addText(myText)"> <input type="text" placeholder="Let's Go" ng-model="myText"> <button type="submit">Add</button> </form> <ul> <li ng-repeat="text in arrayText">{{ text }}</li> </ul> </div>

app.js

(function() { function myController($scope) { $scope.arrayText = ['hello', 'world']; $scope.addText = function(myText) { $scope.arrayText.push(myText); }; } angular.module('app', []) .controller('myController', myController); })();

techspider · Accepted Answer · 2016-07-27 14:40:23Z

You should try this way. It will definitely work.

(function() { var app = angular.module('myApp', []); app.controller('myController', ['$scope', function($scope) { $scope.myText = "Object Push inside "; $scope.arrayText = [ ]; $scope.addText = function() { $scope.arrayText.push(this.myText); } }]); })();

In your case $scope.arrayText is an object. You should initialize as a array.

Collectives™ on Stack Overflow

How to push object into an array using AngularJS

6 Answers 6

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Linked

Related