Array push, duplicate elements

Question

This is my HTML:

<body ng-app="app">

<div ng-controller="AppController as vm">

    <form name="testForm" ng-submit="vm.submit(vm.message)" class="form-group">
        <textarea ng-model="vm.message.text" placeholder="text" class="form-control"></textarea>
        <input type="hidden" ng-model="vm.message.date">
        <input type="submit" class="btn btn-primary">
    </form>

    <table class="table table-stripped table-bordered">
        <tr ng-repeat="message in vm.messages track by $index">
            <td>{{ message.text }}</td>
            <td>{{ message.date }}</td>
        </tr>
    </table>

</div>

This is my controller:

    (function(){
    'use strict';

    angular.module('app', [
        'ngRoute'
    ]).controller('AppController', AppController);

    function AppController() {

        var vm = this;        
        vm.submit = submit;                
        vm.messages = [];

        function submit(elem) {
            elem.date = new Date();
            vm.messages.push(elem);
        }  

    }
})();

I don't get it, whenever I enter and submit a message object, all the objects inside the vm.messages array become that object.

I want to save all the objects inside the array without any change. What am I doing wrong?

you use one message object

Grundy
– Grundy

2016-01-25 16:42:32 +00:00
Commented Jan 25, 2016 at 16:42 — Grundy
– Grundy, Commented Jan 25, 2016 at 16:42

Grundy · Accepted Answer · 2016-01-25 16:45:45Z

You use just one message object, so you always add reference to it.

Just create new object, on submit

    (function(){
    'use strict';

    angular.module('app', [
        
    ]).controller('AppController', AppController);

    function AppController() {

        var vm = this;        
        vm.submit = submit;                
        vm.messages = [];
        vm.message = {}; //create object

        function submit(elem) {
            elem.date = new Date();
            vm.messages.push(elem);
            vm.message = {}; //create new object
        }  

    }
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-app="app" ng-controller="AppController as vm">

    <form name="testForm" ng-submit="vm.submit(vm.message)" class="form-group">
        <textarea ng-model="vm.message.text" placeholder="text" class="form-control"></textarea>
        <input type="hidden" ng-model="vm.message.date">
        <input type="submit" class="btn btn-primary">
    </form>

    <table class="table table-stripped table-bordered">
        <tr ng-repeat="message in vm.messages track by $index">
            <td>{{ message.text }}</td>
            <td>{{ message.date }}</td>
        </tr>
    </table>

</div>

Michael Giovanni Pumo · Accepted Answer · 2016-01-25 16:47:36Z

0

Well, you don't have vm.message defined anywhere? I think it might also be an idea to store your submit function as part of vm too:

(function(){
    'use strict';

    angular.module('app', [
        'ngRoute'
    ]).controller('AppController', AppController);

    function AppController() {

        var vm = this;        
        vm.submit = submit;
        vm.message = {};      
        vm.messages = [];

        vm.submit = function(elem) {
            elem.date = new Date();
            vm.messages.push(elem);
        }  

    }
})();

answered Jan 25, 2016 at 16:47

Michael Giovanni Pumo

14.9k18 gold badges100 silver badges145 bronze badges

1 Comment

Grundy Over a year ago

note: you should update vm.message in submit function with new object otherwise you get same behavior as in question

Collectives™ on Stack Overflow

Array push, duplicate elements

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related