如何使用Angular.js / Javascript正确删除特定行

Question

i need one help.I need to remove a particular row from a table using Angular.js .Here i have + and - button implementation.I have all my code inside https://plnkr.co/edit/D3UrDYwiglMKQyCW0wvW?p=preview

From the Plunkr suppose for Monday i did 3 entries using + button.when i am deleting the middle(second) row using - button this is deleting but it doing null to the 3rd row subcategory field and also displaying the different subcategory which is not belongs to that row category part.Here i need when user will delete any row that row value will delete not other row.All codes are present inside plunkr .Please help me.

Answer 1

I forked your plunker here

Some of the changes:

1. Defined listOfSubCategory in the controller as an array rather than having a function build it for each category.

Controller :

$scope.listOfSubCategory = [{
  id: 1,
  name: 'SubCategory 1',
  value: 1,
  category: 1
}, {
  id: 2,
  name: 'SubCategory 2',
  value: 2,
  category: 2
}, {
  id: 3,
  name: 'SubCategory 3',
  value: 3,
  category: 3
}, {
  id: 4,
  name: 'SubCategory 4',
  value: 4,
  category: 4
}];

2. Changed ng-options to filter the subcategories based on selected category.

HTML

ng-options="sub.name for sub in listOfSubCategory | filter:{ category: answer.category.id}"

3. Also, made some other minor changes, like having only on for all 's rather than one for each and used "track by $index" where needed.