我有一些表单，每个表单都放在页面中的可折叠面板包装器中。我的每个表格都由3或4个表格组成。每种形式都由控制器块控制。最后，我为每个表单组都有不同的功能块。
目前，一旦创建并填充了字段，表单组就会动态创建.json文件。 （你可以在这里看到这个.gif：DYNAMICALLY CREATED JSONS）
我有一个用PHP编写的API;我正在分享如何以.gif格式分别插入和选择工作。（目前api使用GET来处理所有内容以便轻松测试它，所以不要惊讶我知道它。）（{{3} }，INSERT）
我需要做的是，将这些发布到DB并立即提交，如果所有JSON的聚合没有错误，并在提交之前警告用户，如果有错误。
因此，我的问题是我如何编写一个实现发布这些JSON的提交函数。
下面你可以在代码片段中找到我的代码，当然不在这里工作;但我正在分享，因为我需要一个解决方案。在我的控制器的末尾，我有一个名为submitKisiIletisimBilgileri的函数，它当前将所有JSON和日志连接到控制台。而不是这个，它需要通过使用不同的参数调用LocationService.AddField（）几次来执行post。但我无法塑造我的代码的那一部分;这是我需要帮助的地方。 ：）
app.controller('KisiIletisimBilgileri', ["$scope", "LocationService", function ($scope, LocationService) {
$scope.phones = [{
type: '',
tel: ''
}];
$scope.addNewPhoneNumber = function () {
$scope.phones.push({
'type': '',
'tel': ''
});
// console.log(dataPhones);
};
$scope.removePhoneNumber = function (x) {
// var lastItem = $scope.phones.length - 1;
var index = $scope.phones.indexOf(x)
if ($scope.phones.length > 1) //Never delete last one
$scope.phones.splice(index, 1);
};
var dataPhones = $scope.phones;
//Email Variables
$scope.EmailTypeId = null;
$scope.EmailTypeList = null;
//Email Object & Functions
$scope.mails = [{
//id: '1',
type: '',
email: ''
}];
$scope.addNewEmailAddress = function () {
//var newItemNo = $scope.mails.length + 1;
$scope.mails.push({
//'id': '' + newItemNo,
'type': '',
'email': '' //+ newItemNo
});
};
$scope.removeEmailAddress = function (x) {
// var lastItem = $scope.mails.length - 1;
var index = $scope.mails.indexOf(x)
if ($scope.mails.length > 1) //Never delete last one
$scope.mails.splice(index, 1);
};
var dataMails = $scope.mails;
//Media Variables
$scope.MediaTypeId = null;
$scope.MediaTypeList = null;
//Media Object & Functions
$scope.media = [{
//id: '1',
type: '',
sma: ''
}];
$scope.addNewSMAccount = function () {
//var newItemNo = $scope.media.length + 1;
$scope.media.push({
//'id': '' + newItemNo,
'type': '',
'sma': '' //+ newItemNo
});
};
$scope.removeSMAccount = function (x) {
// var lastItem = $scope.media.length - 1;
var index = $scope.media.indexOf(x)
if ($scope.media.length > 1) //Never delete last one
$scope.media.splice(index, 1);
};
var dataMedia = $scope.media;
$scope.submitKisiIletisimBilgileri = function () {
var data = new Array();
data.push(dataPhones);
data.push(dataMails);
data.push(dataMedia);
/* post to server*/
console.log(data);
}
}]);
app.factory('LocationService', ["$http", function($http) {
var fac = {};
fac.AddField = function(q, t, c0, v0, c1, v1, c2, v2) {
return $http.get('assets/api/kisiduzenle.php?q=' + q + '&t=' + t + '&c[0]=' + c0 + '&v[0]=' + v0 + '&c[1]=' + c1 + '&v[1]=' + v1 + '&c[2]=' + c2 + '&v[2]=' + v2);
}
return fac;
}]); //factory<div class="panel panel-white" id="paneliletisimbilgileri">
<div class="panel-heading">
<h4 class="panel-title text-primary">Kişi İletişim Bilgileri</h4>
<ct-paneltool class="panel-tools" tool-collapse="tool-collapse"></ct-paneltool>
</div>
<div uib-collapse="paneliletisimbilgileri" ng-init="paneliletisimbilgileri=false" class="panel-wrapper">
<form role="form" class="form-horizontal" ng-controller="KisiIletisimBilgileri">
<!--PHONES-->
<div class="form-group" data-ng-repeat="block in phones">
<label class="col-sm-1 control-label" for="adsoyadunvan" ng-model="block">
Phone Number
</label>
<div class="col-sm-1">
<!--
<select class="form-control" ng-model="PhoneTypeId" ng-options="PhoneTypeList.COUNTRY_ID as PhoneTypeList.NAME for PhoneTypeList in PhoneTypeList" ng-change="GetPhoneType()">
<option value="" disabled="">Seçiniz</option>
</select>
-->
<span class="clip-select">
<select ng-model="block.type" name="country" class="form-control">
<option value=""> </option>
<option value="Aktif">Aktif</option>
<option value="İş">İş</option>
<option value="Kişisel">Kişisel</option>
<option value="Cep">Cep</option>
</select>
</span>
</div>
<div class="col-sm-2">
<input type="text" ng-model="block.tel" id="adsoyadunvan" class="form-control underline" name="masked" ui-mask="(999) 999-9999" placeholder="(999) 999-9999">
</div>
<button class="col-md-offset-4 btn btn-red" href="#"><i class="fa fa-minus" ng-click="removePhoneNumber(block)"></i> </button>
</div>
<div id="phonesDisplay">
<button class="col-md-offset-4 btn btn-azure" href="#"><i class="fa fa-plus" ng-click="addNewPhoneNumber()"></i> </button>
<br>{{ phones }}
</div>
<!--PHONES-->
<!--MAILS-->
<div class="form-group" data-ng-repeat="block in mails">
<label class="col-sm-1 control-label" for="adsoyadunvan" ng-model="block">
E-mail
</label>
<div class="col-sm-1">
<span class="clip-select">
<select ng-model="block.type" name="country" class="form-control">
<option value=""> </option>
<option value="Aktif">Aktif</option>
<option value="İş">İş</option>
<option value="Kişisel">Kişisel</option>
</select>
</span>
</div>
<div class="col-sm-2">
<input type="email" ng-model="block.email" id="adsoyadunvan" class="form-control underline" name="masked" placeholder="abc@abc.com">
</div>
<button class="col-md-offset-4 btn btn-red" href="#"><i class="fa fa-minus" ng-click="removeEmailAddress(block)"></i> </button>
</div>
<div id="mailsDisplay">
<button class="col-md-offset-4 btn btn-azure" href="#"><i class="fa fa-plus" ng-click="addNewEmailAddress()"></i> </button>
<br>{{ mails }}
</div>
<!--MAILS-->
<!--SOCIAL MEDIA-->
<div class="form-group" data-ng-repeat="block in media">
<label class="col-sm-1 control-label" for="adsoyadunvan" ng-model="block">
Social Media Account
</label>
<div class="col-sm-1">
<span class="clip-select">
<select ng-model="block.type" name="country" class="form-control">
<option value=""> </option>
<option value="Facebook">Facebook</option>
<option value="Twitter">Twitter</option>
<option value="Instagram">Instagram</option>
</select>
</span>
</div>
<div class="col-sm-2">
<input type="text" ng-model="block.sma" id="adsoyadunvan" class="form-control underline">
</div>
<button class="col-md-offset-4 btn btn-red" href="#"><i class="fa fa-minus" ng-click="removeSMAccount(block)"></i> </button>
</div>
<div id="mediaDisplay">
<button class="col-md-offset-4 btn btn-azure" href="#"><i class="fa fa-plus" ng-click="addNewSMAccount()"></i> </button>
<br>{{ media }}
</div>
<!--SOCIAL MEDIA-->
<div>
<button class="col-md-offset-4 btn btn-green" href="#"><i class="fa fa-paper-plane" ng-click="submitKisiIletisimBilgileri()"></i> </button>
</div>
</form>
</div>
</div>
编辑1：我已更新我的提交功能，如下所示
$scope.submitKisiIletisimBilgileri = function () {
$scope.myForm.$setSubmitted();
if ($scope.myForm.$invalid) {
alert("There's something invalid in one of the forms!");
} else {
///api/kisiduzenle.php?q=add&t=telefon&c[0]=KISILIK_ID&v[0]=119486&c[1]=TELEFON&v[1]=888888888&c[2]=TIP&v[2]=W
var urlParams = {
q: 'add',
t: 'telefon',
c0: 'KISILIK_ID',
v0: '119486',
c1: 'TELEFON',
v1: '8888888888',
c2: 'TIP',
v2: 'W'
}
var data = new Array();
data.push(dataPhones);
data.push(dataMails);
data.push(dataMedia);
LocationService.AddField(urlParams, data);
}
}
编辑2：虽然我在LocationService中的功能是这样的..
fac.AddField = function (urlParams, formData) {
var request = {
method: 'GET'
url: 'assets/api/kisiduzenle.php?q=' + urlParams.q + '&t=' + urlParams.t + '&c[0]=' + urlParams.c0 + '&v[0]=' + urlParams.v0 + '&c[1]=' + urlParams.c1 + '&v[1]=' + urlParams.v1 + '&c[2]=' + urlParams.c2 + '&v[2]=' + urlParams.v2
data: formData,
headers: {
'Content-Type': 'application/json'
}
}
答案 0 :(得分：1)
首先，您应该为表单命名，以便从您的控制器进行访问。 （可选）对嵌套表单使用ngForm指令 - https://docs.angularjs.org/api/ng/directive/ngForm - 这非常有用。如果您的某个嵌套表单无效，那么您的父表单也无效。
<form name="myForm">
<!-- first nested form -->
<div ng-form="firstNestedForm">
</div>
<!-- second nested form -->
<div ng-form="secondNestedForm">
</div>
<!-- etc. -->
...
</form>
之后更新您的函数submitKisiIletisimBilgileri，使其看起来像这样
$scope.submitKisiIletisimBilgileri = function () {
$scope.myForm.$setSubmitted();
if($scope.myForm.$invalid){
// alert user
}else{
// gather your forms data and post it to server
}
}
正确设置表单非常重要，因为$scope.myForm.$invalid取决于它。如果您的输入等没有任何验证器或required属性，那么您的表单将始终有效。
在这里阅读更多https://docs.angularjs.org/api/ng/type/form.FormController和 https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
您的$ http请求应如下所示
var request = {},
formData = {data: []};
formData.data.push(dataPhones);
formData.data.push(dataMails);
formData.data.push(dataMedia);
request = {
method: 'POST' // or GET... it depends on you API
url: 'http://myapi.com/form' // your API url
headers: {
'Content-Type': 'application/json' // here you can place authorization token etc.
},
data: formData // your form data to post on server
}
$http(request).then(function(response){
// do something on success
},function(error){
// do something on error
});
或使用LocationService
app.factory('LocationService', ["$http", function($http) {
var fac = {};
fac.AddField = function(formData) {
var request = {
method: 'GET',
url: 'assets/api/kisiduzenle.php',
params: formData
}
return $http(request);
}
return fac;
}]);
答案 1 :(得分：-1)
我对角度并不熟悉，但是......为什么不在你的函数中使用jQuery？
var formData = $( "#testform" ).serialize();