如何使用AngularJS表单将POST数据发送到Play Framework Controller

Question

I have on my web application (Play Framework 2.2.1 & Scala) a list of customers who are displayed with ajax and AngularJS. It works fine, and now I want to add a new customer dynamically in my list, with a JS pop up I've made (with jQuery UI).

I search first how to display on browser data sended by the HTML/AngularJS form, but when I click on my submit button, nothing happen... And I don't know why, other AngularJS actions works.

Here is my code :

• JavaScript

   function AddCustomerController($scope) { $scope.add = function() { $scope.customers.push({id: $scope.email, phone: $scope.phone, isActivated: $scope.activation, name: $scope.name, roleType: $scope.roleType}); } } 

• HTML

   <div id="dialogAddCustomer" title="title" ng-controller="AddCustomerController"> <label id="dialNewCustomerName">Add Customer</label> <label class="lblPopUp">Email</label> <input type="text" id="dialNewCustomerEmail" class="form-control" ng-model="email" /> <label class="lblPopUp">Phone Number</label> <input type="text" id="dialNewCustomerPhone" class="form-control" ng-model="phone" /> <label class="lblPopUp">Customer Activated ?</label> <br /> <input type="radio" name="activation" id="dialNewCustomerYes" value="1" ng-model="activation" /> Yes <input type="radio" name="activation" id="dialNewCustomerNo" value="2" ng-model="activation" /> No <label class="lblPopUp">Name</label> <input type="text" id="dialNewCustomerName" class="form-control" ng-model="name" /> <label class="lblPopUp">Role Type</label> <br /> <select class="form-control" ng-controller="RoleTypesController"> <option ng-repeat="roleType in roleTypes" value="{{roleType.id}}" ng-model="roleType">{{roleType.name}}</option> </select> <br /> <button class="btn btn-default" type="submit" ng-click="add()">Validate</button> </div> 

Second, I don't know how to push data to my controller (I've searched already on the web) correctly to insert new customer in database.

Any idea, or tips ?

Answer 1

Maybe you should add AddCustomerController to the HTML, or move the add() function to the CustomerController .

You should also just put a customer object into scope, and add the individual fields to it, and then access it via customer.email , customer.phone and so on. That will help prevent scoping issues and also make the controller code a lot simpler.

Also, this has nothing to do with Play, as you don't send any data to the server (check $http in Angular's documentation on how to do this).

Answer 2

Nothing is ever sent to the server because the code never instructs AngularJS to send anything.

Your add function modifies local scope only, and doesn't invoke $http.post() .

You may be thinking too much in html terms and not enough in AngularJS terms. With angular you don't need to have a form; it can be handy - particularly for validation - but it's not required. The model is what is key, with or without a form.

In general, I suggest having your input s modify parts of an object, so instead of:

<input type="text" ng-model="email" />
<input type="text" ng-model="phone" />
<button type="submit" ng-click="add()">Add</button>

do instead:

<input type="text" ng-model="customer.email" />
<input type="text" ng-model="customer.phone" />
<button type="submit" ng-click="add(customer)">Add</button>

Controller then something like:

function AddCustomerController($scope, $http) {
    $scope.customer = {};
    $scope.add = function(newCustomer) {
        // this assumes newCustomer has been validated
        $http.post('/api/customers', newCustomer); // TODO: handle response
    }
}

As a side note, the more you get into angular, the less you'll need jquery and jquery ui - I have a rule that a page is either jquery or angular, but never both. YMMV.