javascript - AngularJS-不需要的绑定(bind)

我试图从AngularJS documentation扩展“ Heros”应用程序

我想添加创建/添加英雄的功能。

在plunk中的HeroList.js中，单击HeroList.html中的Add按钮后，可以添加新英雄。

但是，如果我要更新输入字段（比如说名称），它们也会在列表中进行编辑。

例如，如果我添加了新英雄（美国队长），请单击“添加”，然后键入“罗比”，美国队长将与罗比并置。

(function(angular) {
  'use strict';
function HeroListController($scope, $element, $attrs) {
  var ctrl = this;

  // This would be loaded by $http etc.
  ctrl.list = [
    {
      name: 'Superman',
      location: ''
    },
    {
      name: 'Batman',
      location: 'Wayne Manor'
    }
  ];

   ctrl.create = function(hero) {
    ctrl.list.push(hero);
  };

  ctrl.updateHero = function(hero, prop, value) {
    hero[prop] = value;
  };

  ctrl.deleteHero = function(hero) {
    var idx = ctrl.list.indexOf(hero);
    if (idx >= 0) {
      ctrl.list.splice(idx, 1);
    }
  };
}

angular.module('heroApp').component('heroList', {
  templateUrl: 'heroList.html',
  controller: HeroListController,
  bindings: {
    onCreate: '&'
  }
});
})(window.angular);

最佳答案

您的问题是您要引用同一英雄对象，因此当您更新文本字段时，它将自动在列表中更新它。为了避免这个问题，您可以使用angular.Copy（）

 ctrl.create = function(hero) {
    ctrl.list.push(angular.copy(hero));
  };

这将创建要添加到列表的单独副本。