AngularJS数组编辑需求：替换原数组项而非新增元素

你现在的代码是点击按钮时新增数组元素，而不是替换当前编辑项，核心问题有两个：

• 输入框绑定的是全局$scope变量（name/age/weight），不是当前正在编辑的item对象
• add函数的逻辑是往数组里push新元素，没有关联到当前项

咱们可以通过调整数据绑定和按钮逻辑来实现更新功能，下面是修改方案：

1. 修改HTML代码 #

把输入框的ng-model直接绑定到当前循环的item属性上，这样输入时就直接修改原数组里的对象，按钮只需要触发确认逻辑（如果需要的话）：

<div ng-repeat="item in items">
  <p>{{item.name}}</p>
  <!-- 绑定到当前item的name -->
  <input class="form-control" name="type" placeholder="name" ng-model="item.name">
  <br />
  <ul>
    <li ng-repeat="(name, param) in item.params">{{name}} : {{param}}</li>
    <!-- 绑定到当前item的params属性 -->
    <input class="form-control" placeholder="age" ng-model="item.params.age">
    <input class="form-control" placeholder="weight" ng-model="item.params.weight">
    <!-- 点击时调用update函数，传入当前item -->
    <button class="btn btn-clear" type="button" ng-click="update(item)">Update</button>
  </ul>
</div>

2. 修改JS代码 #

把原来的add函数改成update函数，用来处理当前项的更新逻辑（比如打印日志）：

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.items = [
    { "name": "john", "params": { "age": 22, "weight": 66 } },
    { "name": "eva", "params": { "age": 19, "weight": 54 } },
    { "name": "jeremy", "params": { "age": 17, "weight": 75 } }
  ];
  
  // 替换原add函数，接收当前要更新的item
  $scope.update = function(item) {
    // 因为双向绑定已经修改了原数组的item，这里可以做额外操作比如打印日志
    console.log('更新后的数组:', $scope.items);
    console.log('当前更新的项:', item);
  };
});

为什么这样改？ #

AngularJS的双向数据绑定会自动把输入框的修改同步到原数组的item对象里，所以不需要手动去替换数组元素。按钮的update函数主要是用来处理更新后的额外逻辑（比如日志、接口请求等），如果不需要额外操作，甚至可以直接去掉函数，点击按钮只是视觉上的确认~

这样修改后，你点击每个item下面的Update按钮，就会更新当前编辑的那一项，而不会新增元素了。

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