Javascript AngularJS-通过ajax提交带有复选框的表单

我有一个带有

复选框

和其他输入字段的表单。

data-ns-form

指令用于通过ajax提交表单数据。此表单的控制器是

UserController

HTML

<div ng-controller="UserController">
  <form data-ns-form="formData">
    Full Name : <input type="text" name="fullname" ng-model="formData.fullname" />
    Favourite Beverage :
    <label>
      <input type="checkbox" name="beverages[]" ng-model="formData.beverages[0]" value="coffee"> Coffee
    </label>

    <label>
      <input type="checkbox" name="beverages[]" ng-model="formData.beverages[1]" value="tea"> Tea
    </label>

    <label>
      <input type="checkbox" name="beverages[]" ng-model="formData.beverages[2]" value="colddrinks"> Cold Drinks
    </label>

    <button type="submit"> Send </button>
  </form>
</div>

指令

app.directive('nsForm', function(){
    return {
        restrict : "A",
        scope: {
            formData : "=nsForm"
        },
        link : function(scope, iElem, iAttr) {
            $(iElem).on('submit', function(e) {
                e.preventDefault();

                console.log("FORM DATA");
                console.log(scope.formData);
            });
        }
    }
});

一点描述

提交表单时，复选框的布尔值为TRUE，但我希望值位于attirbute值内。例如，如果我选中“咖啡”和“冷饮”，我会得到

饮料=[true，false，true]

，但我想要的是

饮料['coffee'，'colddrink']

。 AngularJS的方法是什么？ 还有。

---

在

AngularJS

中是否有任何

首选的

提交表单的方式，而不是自己创建

指令

我看不出有任何理由在这里使用“name”属性。您需要使用带有保存数据功能的

ng click

，这应由服务负责。你可以用angular做很多事情，比如在文档中搜索你正在做的任何事情

---

此外，您可能应该将所有数据（例如饮料值）保存在javascript中，而不是html中，然后将其绑定到页面。或者在数据库中，然后进入js，然后进入页面。这一切都取决于您的信息需要有多大的动态性—请务必提前思考。

您确定知道“异步”的含义吗？这似乎不相关。@m59我应该说

ajax

？但无论如何，这个问题与

ajax

/

async

无关。请注意，我在函数中意外地在

数据上使用了
$
。我已经写了太多的php，哈哈。它没有任何意义：）
app.directive('nsForm', function(){
    return {
        restrict : "A",
        scope: {
            formData : "=nsForm"
        },
        link : function(scope, iElem, iAttr) {
            $(iElem).on('submit', function(e) {
                e.preventDefault();

                console.log("FORM DATA");
                console.log(scope.formData);
            });
        }
    }
});

<div ng-controller="UserController">
Favourite Beverage :
<label>
  <input type="checkbox" ng-model="formData.beverages[0]" ng-true-value="coffee">Coffee
</label>

<label>
  <input type="checkbox" ng-model="formData.beverages[1]" ng-true-value="tea">Tea
</label>

<label>
  <input type="checkbox" ng-model="formData.beverages[2]" ng-true-value="colddrinks">Cold Drinks
</label>

<button ng-click="save()"> Send </button>
</div>

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

app.factory('myService', function($http) {
  var myService = {
    save: function(data) {
      //your ajax call here
      console.log(data);
    }
  };
  return myService;
});

app.controller('UserController', function($scope, myService) {
  $scope.formData = {};
  $scope.formData.beverages = [];
  $scope.save = function() {
    myService.save($scope.formData);
  };
});