javascript - 使用 ng-model 将数据插入数组

Question

我正在使用 ng-repeat 渲染数组的内容，如下所示 -

    <tr  ng-repeat="option in eventCtrl.questionDetail.options track by $index">
           <th scope="row">Option {{$index + 1}}</th>
                <td>
                     <input type="text" ng-model="option" ng-change="eventCtrl.newlyAddedOptions[$index] = option" 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>

单击按钮后，我将一个空字符串插入到 QuestionDetail.options 数组中，以便获得一个空输入字段来插入我的数据。 Controller 函数如下所示 -

myApp.controller('eventController',function(){
     let dash=this;
     dash.newOption ='';
     //store all newoptions to this array before finally updating the 
     //question
     dash.newlyAddedOptions = [];
     dash.addOption = () =>{
         dash.questionDetail.options.push(dash.newOption);
     });
         //add new options 
dash.updateTheQuestion = () =>{
  //add the newly added options in the questionDetail if any which will be finally updated
apiService.updatequestion(dash.params.qid,dash.questionDetail).then(function successCallBack(response) {
            $rootScope.$broadcast("loader_hide");
            alert(response.data.message);
        });
    }

现在，当我将数据插入字段并尝试添加另一个选项时，之前插入的字段将变为空白，因为 questionDetail.options 数组再次重新呈现。但是我使用了 ng-更改以收集数据并将其存储到newAddedOptions数组中。

如何使用 ng-model="option" 检索到的值更改推送到数组中的空字符串，以便我可以将它们直接推送到 questionDetal 中。选项数组。

我知道这件事很容易完成，但我错过了一些东西。先感谢您。

编辑:我推送了一个空字符串，因为我希望在单击添加选项时有一个空白输入，可以在其中插入新选项。这主要是编辑问题 View ，用户可以在其中添加选项或使用来自数据库的选项删除一个选项。

Plunkr- https://plnkr.co/edit/SLfy8qaz8LoHurwpVmw6?p=catalogue

Answer 1

试试这个:

<tr  ng-repeat="opt in eventCtrl.questionDetail.options track by $index">
               <th scope="row">Option {{$index + 1}}</th>
                    <td>
                         <input type="text" ng-model="newlyAddedOptions[$index]"  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>

https://codepen.io/supravi96/pen/bMmpOQ?editors=1010