如何将ng-value发布到mysql数据库

时间:2016-03-31 07:20:05

标签: mysql angularjs

enter image description here我正在做一个表单,我已经在我的表单中显示了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:&nbsp&nbsp&nbsp</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数据库,以便我可以将其保存并返回到我的视图表。

1 个答案:

答案 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()">
      [...]