current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 9 down vote favorite

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);
        }
    });
})();
share|improve this question
    
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 May 27 '15 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 May 27 '15 at 14:00
up vote 9 down vote accepted

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>
share|improve this answer
1  
Button type should be submit. – User2 May 27 '15 at 14:50
    
thanks for the info – Anik Islam Abhi May 27 '15 at 15:17
up vote 3 down vote

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>
share|improve this answer
up vote 2 down vote

'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>
share|improve this answer
up vote 2 down vote

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);

})();
share|improve this answer
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote 

  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>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.