草庐IT

javascript - Angularjs 推送到服务中的数组替换了以前的项目

coder 2024-07-25 原文

我正在尝试添加到 home.html 中的列表,并使用 ionic 和 angularjs 在 myOrders.html 中显示列表。

问题是,当我将新项目推送到数组时,之前的项目会被新项目替换。

示例:

push 'one' -> array is [{'name':one'}]

push 'two' -> array is [{'name':'two'},{'name':'two'}] // should be [{'name':'one'},{'name':'two'}]

push 'three' -> array is [{'name':'three'}, {'name':'three'}, {'name':'three'}] // should be [{'name':'one'},{'name':'two'},{'name':'three'}]

我在下面添加了我的代码的相关部分。

home.html(添加到列表)

<ion-view title="Home">
    <ion-content ng-controller="homeCtrl">
        <form ng-submit="submitForm(product)" class="list">
            <input ng-model="product.name" type="text">
            <input type="submit" value="Search" class="button">
        </form>          
    </ion-content>
</ion-view>

myOrders.html(显示列表)

<ion-view title="My Orders">
    <ion-content ng-controller="myOrdersCtrl">
        {{ product }}
    </ion-content>
</ion-view>

controllers.js

angular.module('app.controllers', [])
...
.controller('homeCtrl', function($scope, $state, formData) {
        $scope.product = {};

        $scope.submitForm = function(product) {
            if (product.name) {
                formData.updateForm(product);
                $state.go('menu.myOrders');
            } else {
                alert("Please fill out some information for the user");
            }
        };
    })

.controller('myOrdersCtrl', function($scope, formData) {
    $scope.product = formData.getForm();
})

services.js

angular.module('app.services', [])

.service('formData', [function(){
    return {
        form: [],
        getForm: function() {
            return this.form;
        },
        updateForm: function(item) {
            this.form.push(item);
        }
    }
}]);

最佳答案

您一次又一次地将相同的对象插入到数组中。由于对象总是按引用传递,因此同一对象的引用被插入数组。当您更新对象时,存储在数组中的所有引用都会更改。

尝试创建对象的副本,同时传递给 updateForm()

.controller('homeCtrl', function($scope, $state, formData) {
        $scope.product = {};

        $scope.submitForm = function(product) {
            if (product.name) {
                formData.updateForm(angular.copy(product));
                $state.go('menu.myOrders');
            } else {
                alert("Please fill out some information for the user");
            }
        };
    })

关于javascript - Angularjs 推送到服务中的数组替换了以前的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34448087/

有关javascript - Angularjs 推送到服务中的数组替换了以前的项目的更多相关文章

  1. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封,在我看来soap请求没有正确的命名空间。任何人都可以建议我

  2. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时,它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器?这是不可能的吗?谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  3. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组,我需要根据最早的事件循环打印。在这种情况下,我需要打印付款和维护日期,如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询,用于查找maintenance和payment项目(非排他性查询),并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  4. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容?我基本上想做类似numbers.slice(0,3)的事情,但要删除切片中的数组项。嗯...嗯,我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组,我们在StackOverflow上找到一

  5. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值,但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗?ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值,你可以这样做:values=@input[x]

  6. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名,我的程序将对其进行迭代。在我之前使用的bash脚本中,我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是,我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  7. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加?这是我的解决方案,但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  8. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象,为什么它会起作用? - 2

    如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象

  9. ruby - Capistrano 3 在任务中更改 ssh_options - 2

    我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置,capistrano与用户deploy连接,这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe

  10. ruby-on-rails - 启动 Rails 服务器时 ImageMagick 的警告 - 2

    最近,当我启动我的Rails服务器时,我收到了一长串警告。虽然它不影响我的应用程序,但我想知道如何解决这些警告。我的估计是imagemagick以某种方式被调用了两次?当我在警告前后检查我的git日志时。我想知道如何解决这个问题。-bcrypt-ruby(3.1.2)-better_errors(1.0.1)+bcrypt(3.1.7)+bcrypt-ruby(3.1.5)-bcrypt(>=3.1.3)+better_errors(1.1.0)bcrypt和imagemagick有关系吗?/Users/rbchris/.rbenv/versions/2.0.0-p247/lib/ru

随机推荐