Question

我在我的网络应用程序（Play Framework 2.2.1和Scala）上有一个使用ajax和AngularJS显示的客户列表。它工作正常，现在我想在我的列表中动态添加一个新客户，我已经制作了一个JS弹出窗口（使用jQuery UI）。

我首先搜索如何在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>

其次，我不知道如何正确地将数据推送到我的控制器（我已在网上搜索过），以便在数据库中插入新客户。

任何想法或提示？

Answer 1

也许您应该将AddCustomerController添加到HTML中，或将add()功能移至CustomerController。

您还应该将customer对象放入范围，并将单个字段添加到其中，然后通过customer.email，customer.phone等访问它。这将有助于防止范围问题，并使控制器代码更简单。

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

Answer 2

没有任何内容发送到服务器，因为代码从不指示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和jquery ui - 我有一个规则，一个页面是jquery或angular，但从来没有。因人而异。

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

2 个答案: