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

Question

我有一个带有复选框 和其他输入字段的表单。 data-ns-form 指令用于通过ajax 提交表单数据。此表单的 Controller 是 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>

Controller

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

一点描述

当我提交表单时，我为选中的复选框得到 bool 值 TRUE，但我想要值属性中的值。例如，如果我选中“coffee”和“Cold Drinks”，我会得到 beverages=[true,false,true]，但我想要的是 beverages['coffee','冷饮']。 AngularJS 的做法是什么？ 并且。 在 AngularJS 中是否有任何首选 方式提交表单而不是自己创建指令？

Answer 1

我看不出这里有任何使用“名称”属性的理由。您需要使用具有保存数据功能的 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 中，然后将其绑定(bind)到页面。或者在数据库中，然后进入js，然后进入页面。这完全取决于您的信息需要多动态 - 请务必提前考虑。