如何将带有数组的表单值传递给角度控制器

Question

I have a functionality to select the document and add the file that document type. Iam unable to send that values to the controller.

Actually i am using add new functionality to the form. So i name it as array and trying to send the details. But iam not getting the details here.

FYI i am using codeigniter for the server scripting.

Can any one help me out.

Here is my view file checklist.php.

    <div ng-controller="checklist">

<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<form class="form-horizontal" role="form" name="checkForm" action="#/customer/adddocument"  novalidate>


<a id="button" onlick="duplicate()">Click me</a>

<div id="duplicater"> 
<div class="row">   
<div class="form-group col-md-6" ng-controller="documentController" >
<label class="col-sm-3 control-label no-padding-right">Documents</label>
<div class="col-sm-9">
<select class="form-control" name="document[]" required ng-model = "checklist.document[]">
<option value="">Select document</option>
<option ng-repeat="option in documentsList.data" value="{{option.AGENT_ID}}">{{option.AGENT_NAME}}</option>
</select>
</div>
</div>

<div class="col-md-6">
<input type="file" name="file" />
</div>

</div>
</div>

<script>
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
// clone.id = "duplicetor" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
</script>


<div class="modal-footer" >
<button ng-show="sub" ng-click="submit(checklist)" ng-disabled="checkForm.$invalid" class="btn btn-sm btn-primary">
<i class="ace-icon fa fa-check"></i>
Save
</button>

<button ng-show="edt" ng-click="update(checklist)" ng-disabled="checkForm.$invalid" class="btn btn-sm btn-primary">
<i class="ace-icon fa fa-check"></i>
Edit
</button>
<button ng-show="edt" ng-click="cancel()"  class="btn btn-sm btn-primary">
<i class="ace-icon fa fa-check"></i>
Cancel
</button>
</div>


<input type="submit" name="submit">


</form>

And here is my controller file checklist.js.

project.controller('checklist', ['$scope', '$http', 'services', '$location', 'uiGridConstants', '$timeout','$interval','$q','$rootScope','$filter', function($scope, $http, services,  $location,  uiGridConstants, $timeout,$interval,$q,$rootScope,$filter,uibDateParser) {


$rootScope.$broadcast("globalgrid",{'displaycolumns': discolumns, 'gridservice':gridservice , 'grid_service_param':grid_service_param });//,'gridload':func_name, 'addnew': "Submit"
//$scope.selectedDate = Date();
$scope.sub = true;
$scope.edt = false;
$scope.uploadfiles = "";
console.log($scope.date);

$scope.custsub = function(e){
 var fd = new FormData();
    fd.append('file', $scope.uploadfiles);
        var f = $scope.uploadfiles;
        console.log(f); 
        console.log(e);
        services.addCustomerinfo(res.data,e.icno,e.customername);
        $rootScope.submit(submitfun);
    });

}

in the controller when i check with console i am not getting anything. can any one help me out.

Answer 1

1.) You need to create a rest api which returns your posted data from form,
2.) create an angular service which makes a request from that api,
3.) include that service in your controller and send retrieved data to view.