AngularJS添加英雄后输入框绑定异常问题求助

你遇到的这个问题是JavaScript引用类型的特性导致的。当你在create方法里直接把传入的hero对象push到ctrl.list数组时，并没有创建新的对象，只是把同一个对象的引用添加到了数组中。输入框绑定的就是这个hero对象，所以后续在输入框里修改内容时，数组里的那个对象引用也会同步更新，导致列表中的英雄信息跟着变化。

解决这个问题的核心是在新增英雄时创建原对象的独立副本，让列表中的对象和输入框绑定的对象不再共享同一个引用。有两种简单的实现方式：

方式1：手动复制属性 #

手动创建一个新对象，把原hero的属性复制过去，这样两个对象就完全独立了：

ctrl.create = function(hero) {
  // 创建新的英雄对象，复制原对象的属性
  var newHero = {
    name: hero.name || '',
    location: hero.location || ''
  };
  ctrl.list.push(newHero);
  
  // 可选：清空输入框，方便新增下一个英雄
  hero.name = '';
  hero.location = '';
};

方式2：使用angular.copy（更简洁） #

AngularJS提供了angular.copy方法，可以快速创建对象的深拷贝，不需要手动复制每个属性：

ctrl.create = function(hero) {
  // 创建原对象的深拷贝
  var newHero = angular.copy(hero);
  ctrl.list.push(newHero);
  
  // 清空输入框的绑定对象（用空对象覆盖原引用）
  angular.copy({}, hero);
};

替换你原有的HeroListController代码即可：

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

    // 初始英雄列表
    ctrl.list = [ 
      { name: 'Superman', location: '' }, 
      { name: 'Batman', location: 'Wayne Manor' } 
    ]; 

    // 修改后的create方法
    ctrl.create = function(hero) {
      var newHero = angular.copy(hero);
      ctrl.list.push(newHero);
      angular.copy({}, 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);

修改后，当你点击"添加"按钮新增英雄时，列表中会添加一个独立的英雄对象。之后在输入框中修改内容，只会影响输入框本身，不会再同步修改列表里已经添加的英雄信息了。

内容的提问来源于stack exchange，提问作者Liviu Sosu