我正在做一个表单,我已经在我的表单中显示了ng值,我必须使用ng-value将该数据传递给mysql.Im,因为我从我的页面url和我获取数据已解码它然后将其绑定到具有ng值的表单。 有什么建议。这是我的示例代码。
div class = "bodycontainer col-lg-9" ng-repeat = "x in fType">
<form name = "logForm" class = "col-lg-12" novalidate ng-submit = "stdCtrl.StudentCtrl()">
<input type = "hidden"
id = "studentid"
name = "studentid"
ng-value = "x.studentid"
ng-model = "stdCtrl.stdId"
class = "form-control" />
<div class = "form-group col-lg-6">
<label>Firstname</label>
<input type = "text"
id = "first"
name = "fname"
ng-required = "true"
ng-value = "x.firstname"
ng-model = "stdCtrl.fName"
class = "form-control"
autofocus
placeholder = "FirstName" ></input>
</div>
<div class = "form-group col-lg-6">
<label>Lastname</label>
<input type = "text"
name = "lname"
ng-required = "true"
ng-value = "x.lastname"
ng-model = "stdCtrl.lName"
class = "form-control"
placeholder = "LastName"></input>
</div>
<div class = "form-group col-lg-12">
<label>Gender:   </label>
<input type="radio" name="gender" ngValue = "x.gender" ng-model="stdCtrl.gender" required>Male</input>
<input type="radio" name="gender" ngValue = "x.gender" ng-model="stdCtrl.gender" required>Female</input>
</div>
<div class = "form-group col-lg-6">
<label>Email</label>
<input type = "email"
name = "email"
ng-required = "true"
ng-value = "x.email"
ng-model = "stdCtrl.Email"
class = "form-control"
placeholder = "Your Email" ></input>
</div>
<div class = "form-group col-lg-6">
<label>Fathername</label>
<input type = "text"
name = "fathername"
ng-required = "true"
ng-value = "x.fathername"
ng-model = "stdCtrl.Fname"
class = "form-control"
placeholder = "Father's Name"></input>
</div>
<div class = "form-group col-lg-6">
<label>Mothername</label>
<input type = "text"
name = "mothername"
ng-required = "true"
ng-value = "x.mothername"
ng-model = "stdCtrl.Mname"
class = "form-control"
placeholder = "Mother's Name"></input>
</div>
<div class = "form-group col-lg-6">
<label>DOB</label>
<input type = "text"
id = "birthdayPicker"
name = "birthdy"
ng-required = "true"
ng-value = "x.birthday"
ng-model = "stdCtrl.brthdy"
class = "form-control"
placeholder = "DOB-Date Of Birth"></input>
</div>
<div class = "form-group col-lg-12">
<label>Home-Address</label>
<textarea name = "address"
ng-required = "true"
ng-bind = "x.address"
ng-model = "stdCtrl.address"
class = "form-control"
placeholder = "PresentAddress"
row = "10" cols = "50" ></textarea>
</div>
<div class = "form-group col-lg-6">
<label>10<sup>th</sup>-Percentage</label>
<input type = "number"
name = "ten"
ng-required = "true"
ng-model = "stdCtrl.tenth"
ng-value = "x.tenth"
class = "form-control"
placeholder = "10th percentage"></input>
</div>
<div class = "form-group col-lg-6">
<label>12<sup>th</sup>-Percentage</label>
<input type = "number"
name = "twelve"
ng-required = "true"
ng-value = "x.twelfth"
ng-model = "stdCtrl.twelfth"
class = "form-control"
placeholder = "12th percentage"></input>
</div>
这是我的app.js
var app = angular.module('MyForm',[])
app.controller('StudentControl',['$scope','$http',function($scope,$http){
$scope.StudentCtrl = function(){
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
};
var fType = JSON.parse(decodeURIComponent($scope.StudentCtrl()['data']));
console.log(fType);
$scope.fType = fType;
}]);
所以我的目标是如何将ng-value数据发送回mysql数据库,以便我可以将其保存并返回到我的视图表。
答案 0 :(得分:1)
您需要将数据发布到后端应用程序,这个将管理mysql操作。
您不需要ng-value
,您必须使用ng-model
值,因此您可以执行以下操作:
app.controller('StudentControl', ['$scope', '$http',
function($scope, $http) {
$scope.userData = {};
$scope.submitForm = function () {
var req = {
method: 'POST',
url: 'http://example.com/your/backend/api',
data: $scope.userData
}
$http(req).then(function(resp) {
// Post OK do something
}, function(err) {
// Post KO do something
});
}
}
]);
我还建议将ng-model
更改为userData.<fieldname>
并使用$scope.userData
<input type = "text"
id = "first"
name = "fname"
ng-required = "true"
ng-model = "userData.fName"
class = "form-control"
autofocus
placeholder = "FirstName" ></input>
您可能还需要创建一个外部div来包含ng-controller="StudentControl"
处的所有内容,然后更改ng-submit
:
<div ng-controller="StudentControl">
<div class = "bodycontainer col-lg-9" ng-repeat = "x in fType">
<form name = "logForm" class = "col-lg-12" novalidate ng-submit = "submitForm()">
[...]