AngularJS技术问题：点击按钮后向现有模型追加数据

嗨，我来帮你搞定这个需求——点击Save按钮后把输入的配置数据添加到现有模型里对吧？下面是具体的实现步骤：

首先，你得先在控制器里初始化好用来存储历史配置的现有模型，比如用一个数组来存多条配置：

// 在你的AngularJS控制器开头，先初始化存储现有数据的数组
$scope.existingConfigList = [];

然后修改你的saveData函数，这里要注意一个坑：直接把configData塞进数组的话，因为对象是引用类型，后续你修改输入框内容会同步改掉已经保存的数据，所以最好先深拷贝一份再添加。具体代码如下：

$scope.saveData = function (configData) {
    // 深拷贝提交的配置数据，避免后续修改输入框影响已保存的内容
    const newConfigItem = angular.copy(configData);
    
    // 把新的数据添加到现有模型数组里
    $scope.existingConfigList.push(newConfigItem);
    
    // 可选操作：提交后清空输入框，方便用户下次输入
    $scope.configData = { A1: '', A2: '', A3: '', A4: '' };
    
    // 如果你现有模型不是数组，而是单个对象（比如要合并到同一个配置对象里），可以用下面的方式：
    // angular.extend($scope.existingConfig, newConfigItem);
    // 或者用ES6的展开运算符：$scope.existingConfig = { ...$scope.existingConfig, ...newConfigItem };
};

额外优化：实时展示已保存的数据 #

如果想在页面上实时看到已经保存的配置，可以在HTML里加个列表展示：

<!-- 展示已保存的配置列表 -->
<h3>已保存的配置</h3>
<ul>
    <li ng-repeat="config in existingConfigList">
        A1: {{config.A1}} | A2: {{config.A2}} | A3: {{config.A3}} | A4: {{config.A4}}
    </li>
</ul>

<!-- 你的输入表单 -->
<input type="text" ng-model="configData.A1" placeholder="输入A1值" />
<input type="text" ng-model="configData.A2" placeholder="输入A2值" />
<input type="text" ng-model="configData.A3" placeholder="输入A3值" />
<input type="text" ng-model="configData.A4" placeholder="输入A4值" />
<button class="btn" ng-click="saveData(configData)">Save Data</button>

这样每次点击Save，新的配置就会被添加到existingConfigList里，页面上的列表也会自动更新显示啦。

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