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数组中，这样我就可以得到一个空的输入字段来插入我的数据。控制器函数看起来像这样 -

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-change来收集数据和存储它进入了newlyAddedOptions数组。

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

我知道这很好，很容易做到，我错过了一些东西。先感谢您。

编辑：我正在推一个空字符串，因为我想要一个空白输入点击添加选项，我可以插入新选项。这主要是编辑问题视图，用户可以在其中添加选项或使用来自数据库的选项删除选项。

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

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

1 个答案: