angularjsformsangularjs-ng-repeat

angular ng-repeat creating multiple forms syntax error


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.


Solution

  • 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>
            ...