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

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值。例如，如果我检查'咖啡'和'冷饮料'，我得到beverages=[true,false,true]，但我想要什么是beverages['coffee','colddrink']。 什么是AngularJS这样做？ 还有。 有没有preferred提交AngularJS表单的方式，而不是自己创建directives？

Answer 1

我在这里看不到任何“name”属性的原因。您需要使用ng-click并具有保存数据的功能 - 并且这应该由服务来完成。有很多你可以用角度来做......在文档中搜索你正在做的任何事情（例如，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，然后转到页面上。这一切都取决于你的信息的动态如何 - 只要确保提前思考即可。