CODEWITHSUNDEEP
javascriptangularjs
Rahul jhawar
Rahul jhawar

Reputation: 237

Using ng-model to insert data into arrays

I'm rendering the contents of an array using ng-repeat like this-

    <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>

On click of the button I'm insering an empty string into the questionDetail.options array so that I get an empty input field to insert my data.Controller functions looks like this-

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);
        });
    }

Now when I insert data into the field and try to add another option the previously inserted field becomes blank beacuse the questionDetail.options array get rerendered again.However I've used ng-change to collect data and store it into the newlyAddedOptions array.

How do I change the empty strings pushed into array with the value that is retrieved with ng-model="option" so that I could directly push those into questionDetal.options array.

I know this good be done easily and I'm missing something. Thank You in advance.

Edit:I was pushing an empty string because I wanted a blank input on clicking the add option where I can insert new option.This is mainly the edit question view where user can add an option or delete an option with the options that are coming from the database.

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

Upvotes: 0

Views: 2646

Answers (1)

supravi
supravi

Reputation: 59

Try this :

<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

Upvotes: 1

Related Questions