Использование ng-модели для вставки данных в массивы

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 для сбора данных и сохранения их в массиве newAddedOptions.

Как изменить пустые строки, помещенные в массив, со значением, полученным с помощью 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