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

AngularJS - submit form with checkboxes via ajax

本文关键字：复选框 表单 通过 ajax 提交 AngularJS-      更新时间：2023-12-01

我有一个包含checkboxes和其他输入字段的表单。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.controller('UserController', function($scope){
 $scope.formData = {fullname : '', beverages : []};
});

指令

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，但我希望值位于值atterbute中。例如，如果我选择了"咖啡"answers"冷饮"，我会得到beverages=[true,false,true]，但我想要的是beverages['coffee','colddrink']。AngularJS的方法是什么？还有。有没有preferred的方式可以在AngularJS中提交表单，而不是自己创建directives？

我看不出这里有任何"name"属性的原因。您需要将ng-click与保存数据的功能一起使用，这应该由服务来处理。你可以用棱角分明的。。。在文档中搜索您正在做的任何事情（例如，请参阅文档中的复选框）。

现场演示（点击）。

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

js:

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);
  };
});

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

相关文章：