javascript - 数组推送,重复元素

标签 javascript angularjs

这是我的 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>

这是我的 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);
        }  

    }
})();  

我不明白,每当我输入并提交一个message 对象时,vm.messages 数组中的所有对象都会成为该对象。

我想把所有的对象原封不动地保存在数组里面。我究竟做错了什么?

最佳答案

您只使用一个消息对象,因此您总是添加对它的引用。

提交时创建新对象

    (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>

关于javascript - 数组推送,重复元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34997626/

相关文章:

javascript - 如何根据2个键合并数组对象?

javascript - Angularjs 指令用于确定 <div>

javascript - 双向数据绑定(bind)不适用于 Internet Explorer 9 中的自定义指令

javascript - 将 ajax 响应放入输入参数(angularjs)

javascript - 在 Python 中,您可以像在 JavaScript 中那样对字符串函数进行原型(prototype)设计吗?

javascript - img.height() 和 img.width() 在 chrome 中返回 0,但在 mozilla 中返回正确值

javascript - 如何检索 Firebase 文档中的所有字段到 map 或 key : Value pair

javascript - 使用 Canvas 从图像中删除像素?

javascript - AngularJS + d3js : Issues with resizing objects

带有飞行前请求的 Angularjs $q.all 在 OPTIONS 请求后解析