AngularJS - 아약스를 통해 확인란이있는 양식 제출

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 방법은 무엇입니까? 그리고 또한. directives을 직접 작성하는 대신 AngularJS에 preferred 양식을 제출하는 방법이 있습니까?

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

, 당신은 아마 그 결박 한 후, 자바 스크립트가 아닌 HTML에서 (예를 들어, 음료 값) 모든 데이터를 가지고 있어야 페이지로 또는 데이터베이스에서 js로 이동 한 다음 페이지로 이동하십시오. 이는 모두 귀하의 정보가 얼마나 역동적이어야하는지에 달려 있습니다. 앞서 생각하도록하십시오.