Angular - Splice Function Always Removes Last Element

I have an array of objects that I want to remove certain objects when a Delete key is clicked. However, it always removes the last item from the rows array, no matter how many rows

Solution 1:

Just to be clear with the answer @ZsoltGyöngyösi gave:

Every element with and id field needs ng-model="$parent.row.field"

Thus, the correct row will be deleted if you setup queryRowTemplate.hml this way:

queryRowTemplate.html

<divclass="form-group col-md-3"><labelfor="selectedField">Select Field</label><selectid="selectedField"class="form-control"ng-model="$parent.row.field"><option>title</option><option>application</option><option>subject</option><option>filetype</option></select></div><divclass="form-group col-md-3"><labelfor="logicalOperator">Logical Operator</label><selectid="logicalOperator"class="form-control"ng-model="$parent.row.logical"><option>equal to</option><option>not equal to</option></select></div><divclass="form-group col-md-3"><labelfor="searchText">Search</label><inputid="searchText"class="form-control"type="text"placeholder="search..."ng-model="$parent.row.search" /></div><divclass="form-group col-md-3"><labelfor="operator">Operator (optional)</label><selectid="operator"class="form-control"ng-model="$parent.row.operator"><optionvalue=""></option><option>AND</option><option>OR</option></select></div><buttonclass="btn btn-default"ng-click="addRqst()"type="submit">Add Row</button><buttonclass="btn btn-default"ng-click="removeRqst($parent.row)"type="submit">Delete Row</button>
{{$parent.$index}}
<hr />

See Plunkr, here

Solution 2:

The code is fine, the correct form is being deleted. The problem is that you are not binding your view to the queryRow directive, so it seems that the last one is being deleted. In reality, angular rebuilds your view based on the array, not knowing about the content of the templates. Hence unbound input fields simply retain the values, except for the last one.