0

I can not delete the proper row from an array using Angular.js. I am providing my code below:

<tr ng-repeat="d in days">
        <td>{{d.day_name}}</td>
        <td>
          <table>
            <tbody>
              <tr ng-repeat="answer in d.answers">
                <td>
                  <select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_category" name="answer_{{$index}}_category" ng-model="answer.category" ng-options="cat.name for cat in listOfCategory track by cat.value" ng-change="removeBorder($index,answer.category.value,$parent.$index)" ng-init="renderWithMode($index,answer.category.value,$parent.$index,isEditMode)">
                    <option value="">Select Category</option>
                  </select>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table>
            <tbody>
              <tr ng-repeat="answer in d.answers">
                <td>
                  <select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_subcategory" name="answer_{{$index}}_subcategory" ng-model="answer.subcategory" ng-options="sub.name for sub in listOfSubCategory[$parent.$index][$index] track by sub.value">
                    <option value="">Select Subcategory</option>
                  </select>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table>
            <tbody>
              <tr ng-repeat="answer in d.answers">
                <td>
                  <!--<input type="text" id="answer_{{$index}}_{{$parent.$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answers.comment">-->
                  <input type="text" id="answer_{{$index}}_{{$parent.$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answer.comment">
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table>
            <tbody>
              <tr ng-repeat="answer in d.answers">
                <td style="width:20px">
                  <input ng-show="d.answers.length>1" class="btn btn-red" type="button" name="minus" id="minus" value="-" style="width:20px; text-align:center;" ng-click="removeRow(d.answers, $index)"> 
                </td>
                <td ng-show="$last">
                  <input type="button" class="btn btn-success" name="plus" id="plus" value="+" style="width:20px; text-align:center;" ng-click="addNewRow(d.answers)">
                  <button type="button" id="btn" ng-click="checkAnswer(d.answers)">Check</button>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
          </table>
        </td>
      </tr>

The above table is giving the output like below.

enter image description here

Here I have added 3 row for monday and suppose I have clicked on middle row - button as per requirement the only middle row should delete but here it is deleting wrong subcategory part from the 3rd row whose screen shot is given below.

enter image description here

I have deleted second row from first screen shot still the second row subcategory part is present and 3rd row subcategory part has deleted which is wrong deletion process. Here is my controller side code:

$scope.days=[];
    $http({
        method:'GET',
        url:"php/customerInfo.php?action=day",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function successCallback(response){
        //console.log('day',response.data);
    angular.forEach(response.data, function(obj) {
      obj.answers = [];
      $scope.addNewRow(obj.answers);
      $scope.days.push(obj);
    });
    },function errorCallback(response) {
    })
    }
    
   $scope.addNewRow = function(answers,hasDelete) {
    answers.push({
      category: null,
      subcategory: null,
      comment: null,
      hasDelete: hasDelete ? hasDelete : false
    });
  };
  
  $scope.removeRow = function(answers, $index){
    answers.splice($index, 1);
    //answers.splice(answers.length-1,1);
  };

Here all data are binding dynamically. I need to delete the right row.

1 Answer 1

-1

Try to remove $ from $index parameter.

$scope.removeRow = function(answers, index){
answers.splice(index, 1);
//answers.splice(answers.length-1,1);

};

Sign up to request clarification or add additional context in comments.

1 Comment

I did as per you but its throwing the same issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.