CODEWITHSUNDEEP
javascriptangularjs
user5443928
user5443928

Reputation:

Can not remove the expected row from table using Angular.js

I have an issue.I need to remove one particular row from table structure of my app using Angular.js.My code is present inside the below plunkr link.

code is present here

In the above code create 3 row for Monday and fill the required data all should different from each row.Delete the middle row using - button,you can check there the last row subcategory is showing wrong.This is my problem.I need if i am deleting any particular row that row data should remove from array and other row will remain constant with the selected data as it was.Please help me.

Upvotes: 0

Views: 61

Answers (1)

Silvinus
Silvinus

Reputation: 1445

I edited your plunker : https://plnkr.co/edit/4okaCC?p=preview

Your problem is in your use of $index in ng-repaet. When you delete middle row the $index of the third row change and you reference a wrong catgeory. I change your plunker to use a function that return subcategories depends on selected category : 

$scope.getSubCategoryFor = function(answer) {
if(!answer.category) {
  return [];
}

  console.log(answer);
  var result = $filter('filter')(subcategories, {id:answer.category.id});
  console.log('result', result);
  return result;
}

and I use this in html : 

<table>
        <tbody>
          <tr ng-repeat="answer in d.answers">
            <td>
              <select class="form-control" id="answer_{{$index}}_subcategory" name="answer_{{$index}}_subcategory" ng-model="answer.subcategory" ng-options="sub.name for sub in getSubCategoryFor(answer)">
                <option value="">Select Subcategory</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>

I hope this will help you

Upvotes: 1

Related Questions