CODEWITHSUNDEEP
javascriptangularjs
pmqa
pmqa

Reputation: 163

Array push, duplicate elements

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?

Upvotes: 3

Views: 2065

Answers (2)

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14774

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

    }
})();

Upvotes: 0

Grundy
Grundy

Reputation: 13381

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>

Upvotes: 4

Related Questions