Angular not submitting parameter with ng-click

Question

Angular not submitting parameter with ng-click

I'm trying to submit a standard form within an angular app. Everything works well until I tried to add ng-click to the submit button of the form The action on the click is just cosmetic to give the user some feedback.

The behavior I have is a bit strange. The submit is done and the call to the click behavior are both called, however, there is no parameters submitted with the form.

I've been googling a bit, and people seems to say that using ng-click on a form disable the submit, but it doesn't, Every works fine , except the form parameters which are not send.

I know I can probably redefine my own submit function, intercept the post using ng-submit and do the post myself, it just seems an overkill, as I want to do is almost working. (in that case, how do you I get the form parameters from within the angular callback ?)

Update

Here is a live example : http://jsfiddle.net/hHapg/5/.If you check a box and submit, there is no parameter on the URL. If you edit the file and remove the ng-click on the submit button, it works.

<form ng-app="test" action="/echo/jsonp" name="orders" target="_blank" ng-controller="test">
    <table>
    <tr ng-repeat="order in [{orderId:1}, {orderId:4}]" >
        <td>
            <input  type="checkbox" name="order_ids{{i}}" value="{{order.orderId}}"></input>
        </td>
        <td>
            {{order.orderId}} : {{ order.checked}}
        </td>

    </tr>
    </table>
    <input type="submit" name="action" value="Picking List" class="btn btn-primary picked" ng-clik="submit(true)">
</form>

Solution

Found the problem. Even though the real code wasn't exactly the one I published. with the help of Langdon I manage to solve it. The problem was I had an hardcoded array in the form declaration (not in the ng-repeat as in my example). (It was hardcoded from an angular point of view, but in fact generated at runtime). Moving this array to the top (same as ng-ap), solved the prome.

javascript
angularjs

Answer 1

Are you setting the name attribute on all your input and select tags? I imagine most Angular examples do not include the name attribute because submitting forms seems a thing of the past.

The simplified example below works fine. I would need to see your specific code to help you troubleshoot what else the problem might be.

http://jsfiddle.net/langdonx/DUV9q/

HTML:

<form ng-app="test" ng-controller="test" action="/echo/jsonp/" method="get">
    <input type="text" name="value1" ng-model="value1"/>
    <input type="text" name="value2" ng-model="value2"/>
    <input type="submit" ng-click="submit()">
</div>

JavaScript:

var app = angular.module('test', []);

app.controller('test', function ($scope, $http) {
    $scope.value1 = "val 1 here";
    $scope.value2 = "and val 2 here";

    $scope.submit = function () {
        alert('it should submit now, if it worked, you\'ll see some json');
    }
});