CODEWITHSUNDEEP
angularjsexpresspugng-submit
user1452030
user1452030

Reputation: 1021

Angular.js - Jade, Form Submission

I'm new to Angular and I'm building my first realtime page based on the boiler plate from:

https://github.com/jimakker/angular-express-bootstrap-seed

I'm not able to get my first form to submit. In fact, nothing happens when I click the button. Given below are the relevant snippets from the code:

Partial View:

.row
form(ng-controller='RegisterCtrl')
    #accordion.panel-group
           //- Panel 1
           .panel.panel-default
            .panel-heading
                h4(class='panel-title')
                    a(data-target='#collapse1', data-toggle="collapse", data-parent="#accordion", class="left-m-1em cursor-pointer") Basic Information
            #collapse1.panel-collapse.collapse
                .panel-body
                    .row
                        .col-lg-2(ng-controller='DropdownCtrl')
                            select(id="gender", ng-model='register.gender', ng-init="getValues('gender')", ng-options='r.value for r in results track by r.key', chosen, class="form-control", data-placeholder="Gender", data-toggle="tooltip", data-trigger="hover", data-placement="top", title="Gender")
                                option(value="") 

//- More panels in between and finally, Panel 6
           .panel.panel-default
            .panel-heading
                h4(class='panel-title')
                    a(data-target='#collapse6', data-toggle="collapse", data-parent="#accordion", class="left-m-1em cursor-pointer") Family
            #collapse6.panel-collapse.collapse
                .panel-body
                    .row
                        .col-lg-3.col-lg-offset-5
                            button(type="button", class="btn btn-success btn-lg", ng-click="saveProfile")
                                span(class="glyphicon glyphicon-ok-circle") 
                                | Submit

I looked at the rendered output and confirmed that the Submit button is indeed within the form tag.

Controller:

function RegisterCtrl($scope, $http) {
$scope.register = {};
$scope.saveProfile = function(item, event) {
    alert("called this!");
    var json = {
        gender: $scope.register.gender,
        marital_status: $scope.register.marital_status,
        dob: $scope.register.dob,
        height: $scope.register.height,
        weight: $scope.register.weight,
        complexion: $scope.register.complexion,
        health: $scope.register.health
    };

    var responsePromise = $http.post("/api/register", json, {});
    responsePromise.success(function(dataFromServer, status, headers, config) {
        console.log(dataFromServer.title);
    });
    responsePromise.error(function(data, status, headers, config) {
        alert("Submitting form failed!");
    });

};
}
RegisterCtrl.$inject = ['$scope', '$http'];

I'm not even hitting the first alert statement and I'm totally unsure why. The other controller DropdownCtrl (used for individual form elements) works just fine and I'm able to populate the values dynamically using the controller. Please help me find the missing piece.

Upvotes: 1

Views: 836

Answers (2)

user1452030
user1452030

Reputation: 1021

Found the problem. Had some stray code in the controller file that read:

` function MyCtrl2() { } MyCtrl2.$inject = [];

 function RegisterCtrl() {
 }
 RegisterCtrl.inject = [];`

And since this was in the file after the actual definition, it messed up the functionality.

Upvotes: 0

Ed_
Ed_

Reputation: 19098

The syntax is ng-click="saveProfile()" rather than ng-click="saveProfile"

Note also that this won't pass any arguments to the function, if you want to do that then you need to pass them inside the markup too.

Upvotes: 1

Related Questions