使用ng-model向数组插入数据时的字段清空问题解决

这个问题我太熟悉了——本质是原始类型值绑定的局限性导致的！你现在把选项存在字符串数组里，而字符串是原始值，ng-model绑定到option时，其实绑定的是这个字符串的副本，当你push新元素触发数组重渲染后，原来的绑定关联就断了，自然输入的内容就没了。

直接用ng-model更新questionDetail.options数组的核心思路是：把数组元素从原始字符串改成引用类型的对象，这样ng-model绑定的是对象的属性，重渲染时引用不变，数据就能保留，还能直接更新原数组。

具体修改步骤： #

1. 调整HTML模板（直接绑定对象属性）

把原来绑定字符串的逻辑改成绑定对象的text属性，去掉多余的ng-change和newlyAddedOptions相关代码：

<tr ng-repeat="option in eventCtrl.questionDetail.options track by $index">
    <th scope="row">Option {{$index + 1}}</th>
    <td>
        <!-- 绑定对象的text属性，直接修改原数组元素 -->
        <input type="text" ng-model="option.text" style="width:100%;">
    </td>
    <td>
        <button type="button" ng-confirm-click="Are you sure to delete?" confirmed-click="eventCtrl.removeOption($index)" class="btn btn-light btn-sm">Delete</button>
    </td>
</tr>
<button type="button" class="btn btn-dark" ng-click="eventCtrl.addOption()" id="addNewOption">+ Add New Answer Option</button>

2. 调整控制器逻辑（存对象而非字符串）

修改addOption方法，推入的是包含空text属性的对象，同时如果是从数据库加载的已有选项，也要确保它们是对象格式（比如后端返回的是字符串数组的话，在控制器初始化时转成对象数组）：

myApp.controller('eventController', function() {
    let dash = this;

    // 初始化时：如果后端返回的是字符串数组，转成对象数组
    // 比如 dash.questionDetail.options = dash.questionDetail.options.map(str => ({text: str}));

    // 添加新选项：推入空对象而非空字符串
    dash.addOption = () => {
        dash.questionDetail.options.push({text: ''});
    };

    // 删除选项逻辑不变（根据索引删除）
    dash.removeOption = (index) => {
        dash.questionDetail.options.splice(index, 1);
    };

    dash.updateTheQuestion = () => {
        // 现在questionDetail.options已经是直接更新后的对象数组，提交时可以直接用
        // 如果后端需要字符串数组，这里可以转一下：
        // const optionsText = dash.questionDetail.options.map(opt => opt.text);
        apiService.updatequestion(dash.params.qid, dash.questionDetail).then(function successCallBack(response) {
            $rootScope.$broadcast("loader_hide");
            alert(response.data.message);
        });
    };
});

为什么这样有效？ #

对象是引用类型，ng-model绑定的是option.text——也就是数组中某个对象的属性，当你添加新元素触发ng-repeat重渲染时，原来的对象引用并没有改变，AngularJS能正确关联到之前的输入值，不会出现内容丢失的情况。同时，输入内容会直接同步到questionDetail.options数组里，不需要额外用newlyAddedOptions中转，最后提交的时候直接用原数组即可（如果后端需要纯字符串数组，在提交前用map转一下就行）。

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