I'm ng-repeating over a collection of items, and each item I want to have its own form and its own submit button, which will send that form info to the submit function. I needed to know which item is being submitted, so I figured I'd create one form per item and that would indicate which one is being submitted. Currently, it's in an li ng-repeat like so:
<input ng-model="query" type="text" placeholder="Filter by" autofocus>
<ul class="gNow">
<li ng-repeat="item in selRole.selectRoles | multifilter:query">
<form name="selRoleForm-{{item.rowId}}" ng-submit="selRole.selectRole(selRoleForm-{{item.rowId}})" novalidate>
<div class="card">
<p>Card Name: {{item.cardName}}</p>
<p>.. other form elements here ..</p>
<p><button type="submit">Select</button></p>
</div>
</form>
</li>
</ul>
I'm getting the following error:
[$parse:syntax] Syntax Error: Token '{' invalid key at column 33 of the expression [selRole.selectRole(selRoleForm-{{item.rowId}})] starting at [{item.rowId}})].
What am I doing incorrectly - or is there a better way to approach this problem?
This SO post is the closest that I could find to my problem, but still, I'm not sure I understand how to adjust to my specific needs.
Just store the form name in your ng-repeated array:
<input ng-model="query" type="text" placeholder="Filter by" autofocus>
<ul class="gNow">
<li ng-repeat="item in selRole.selectRoles | multifilter:query">
<form name="{{item.formName}}" ng-submit="selRole.selectRole(item.formName)" novalidate>
...