Question

我有一个带有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，但我想要值attirbute中的值。例如，如果我选中了'coffee'和'Cold Drinks'，我会得到beverages=[true,false,true]，但我想要的是beverages['coffee','colddrink']。这样做AngularJS的方式是什么？并且。是否有preferred方法在AngularJS中提交表单而不是自己创建directives？

Answer 1

我在这里看不到任何“name”属性的原因。您需要使用ng-click函数来保存数据 - 这应该由服务来处理。您可以使用angular进行很多操作...搜索文档以查找您正在执行的任何操作（例如see checkboxes in the docs）。

Live demo here (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，然后进入页面。这一切都取决于您的信息需要多大的动态 - 只需确保提前考虑。

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

1 个答案: