如何使用AngularJS表单发送POST数据以播放框架控制器

我在我的web应用程序（Play Framework 2.2.1 & Scala）中显示了使用ajax和AngularJS显示的客户列表。它工作正常，现在我想在我的列表中动态添加一个新客户，并使用jQuery弹出窗口（使用jQuery UI）。如何使用AngularJS表单发送POST数据以播放框架控制器

我首先搜索如何在浏览器上显示HTML/AngularJS表单发送的数据，但是当我点击我的提交按钮时，什么都没有发生......我不知道为什么，其他AngularJS操作起作用。

这里是我的代码：

的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>

其次，我不知道如何将数据推到我的控制器（我已经在网上搜索）corr在数据库中插入新客户。

任何想法或提示？

来源

2014-01-23 Azuken

也许您应该将AddCustomerController添加到HTML，或将add()函数移动到CustomerController。

你也应该只是把customer对象为范围，各个字段添加到它，然后通过customer.email，customer.phone等访问它。这将有助于防止范围问题，并使控制器代码更简单。

此外，这与Play无关，因为您不会向服务器发送任何数据（在Angular的文档中查看$ http，了解如何执行此操作）。

来源

2014-01-23 13:25:28

哎呀，我忘了改变我的控制器，我试图测试一些东西..我会编辑这个。无论如何，我已经试图把客户对象，但它似乎没有改变。 – Azuken

因为代码从不指示AngularJS发送任何东西，所以都没有发送到服务器。

您的add函数仅修改本地范围，并且不会调用$http.post()。

您可能会考虑太多的html术语，而AngularJS的术语还不够。有了角度，你不需要有一个形式;它可以很方便 - 特别是用于验证 - 但它不是必需的。这个模型是关键的，无论有没有形式。

在一般情况下，我建议您要求input小号修改对象的部分，所以不是：

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

做，而不是：

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

控制器则是这样的：

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

作为一个侧面说明，你进入角度越多，你就越需要jquery和j查询UI - 我有一个规则，即页面是jQuery或角度，但从来都没有。因人而异。

来源

2014-10-11 07:46:07

如何使用AngularJS表单发送POST数据以播放框架控制器

回答

相关问题