pass the json object to angular form
Question
[ https://drive.google.com/open?id=0B2PqgB8bPJ5xVmpjdTBOakdoTk0 ] this is the image link This is my ng-app and controller of my form:
<!DOCTYPE>
<html>
<head>
<title>Student EditForm</title>
<script src = "javascript/QueryData.js"></script>
<script src = "jquery/jquery-1.10.2.min.js"></script>
<script src = "jquery/jquery-ui.js"></script>
<script src = "angularjs/angular.min.js"></script>
<link rel = "stylesheet" href = "css/jquery-ui.css" />
<link rel = "stylesheet" href = "css/bootstrap.min.css" />
<style>
body{
background-color:#FFFFE0;
width: 1038px;
float: right;
}
form{
width: 400px;
margin: 60px 10px 10px 10px;
}
.form-control{
background-color:#FFFAFA;
}
#btn,#btn1{
margin-top: 10px;
background-color:#ADFF2F;
}
ul{
list-style-type: none;
margin: 0;
padding:0;
width: 25%;
height: 100%;
position: fixed;
background-color: #f1f1f1;
overflow: hidden;
border: 1px solid #000000;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a{
display: block;
color: white;
text-align: left;
padding: 14px 20px;
text-decoration: none;
}
li{
border-bottom: 1px solid black;
}
li a:hover{
background-color: red;
}
</style>
</head>
<body ng-app = "MyForm" ng-controller = "StudentControl as stdCtrl">
<div class = "content-container col-sm-3">
<table>
<nav>
<ul>
<li><a class = "active" href = "studentForm.html">Student-Registration</a></li>
<li><a class = "active" href = "studentDetails.html">Student-Details</a></li>
<li><a class = "active" href = "studentEdit.html">Student-Update</a></li>
</ul>
</nav>
</table>
</div>
<div class = "bodycontainer col-lg-9">
<form name = "logForm" class = "col-lg-12" novalidate ng-repeat = "x in fType" ng-submit = "stdCtrl.StudentCtrl()">
<input type = "hidden"
id = "studentid"
name = "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-model = "stdCtrl.fName"
class = "form-control"
autofocus
placeholder = "FirstName">{{x.firstname}}</input>
<span class = "help-block"
ng-show = "logForm.fname.$invalid && !logForm.fname.$pristine">FirstName Required</span>
</div>
<div class = "form-group col-lg-6">
<label>Lastname</label>
<input type = "text"
name = "lname"
ng-required = "true"
ng-model = "stdCtrl.lName"
class = "form-control"
placeholder = "LastName">{{x.lastname}}</input>
<span class = "help-block"
ng-show = "logForm.lname.$invalid && !logForm.lname.$pristine">LastName Required</span>
</div>
<div class = "form-group col-lg-12">
<label>Gender:   </label>
<input type="radio" name="gender" ng-model="stdCtrl.gender" value="male" required>Male{{x.gender}}</input>
<input type="radio" name="gender" ng-model="stdCtrl.gender" value="female" required>Female{{x.gender}}</input>
<span class = "help-block"
ng-show = "logForm.gender.$invalid && !logForm.gender.$pristine">Gender Required</span>
</div>
<div class = "form-group col-lg-6">
<label>Email</label>
<input type = "email"
name = "email"
ng-required = "true"
ng-model = "stdCtrl.Email"
class = "form-control"
placeholder = "Your Email" >{{x.email}}</input>
<span class = "help-block"
ng-show = "logForm.email.$invalid && !logForm.email.$pristine">Email Required</span>
</div>
<div class = "form-group col-lg-6">
<label>Fathername</label>
<input type = "text"
name = "fathername"
ng-required = "true"
ng-model = "stdCtrl.Fname"
class = "form-control"
placeholder = "Father's Name">{{x.fathername}}</input>
<span class = "help-block"
ng-show = "logForm.fathername.$invalid && !logForm.fathername.$pristine">FatherName Required</span>
</div>
<div class = "form-group col-lg-6">
<label>Mothername</label>
<input type = "text"
name = "mothername"
ng-required = "true"
ng-model = "stdCtrl.Mname"
class = "form-control"
placeholder = "Mother's Name"/>{{x.mothername}}
<span class = "help-block"
ng-show = "logForm.mothername.$invalid && !logForm.mothername.$pristine">MotherName Required</span>
</div>
<div class = "form-group col-lg-6">
<label>DOB</label>
<input type = "text"
id = "birthdayPicker"
name = "birthdy"
ng-required = "true"
ng-model = "stdCtrl.brthdy"
class = "form-control"
placeholder = "DOB-Date Of Birth">{{x.birthday}}</input>
<span class = "help-block"
ng-show = "logForm.birthdy.$invalid && !logForm.birthdy.$pristine">BirthDay Required</span>
</div>
<div class = "form-group col-lg-12">
<label>Home-Address</label>
<textarea name = "address"
ng-required = "true"
ng-model = "stdCtrl.address"
class = "form-control"
placeholder = "PresentAddress"
row = "10" cols = "50" >{{x.address}}</textarea>
<span class = "help-block"
ng-show = "logForm.address.$invalid && !logForm.address.$pristine">PresentAddress Required</span>
</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"
class = "form-control"
placeholder = "10th percentage">{{x.tenth}}</input>
<span class = "help-block"
ng-show = "logForm.ten.$invalid && !logForm.ten.$pristine">10th-percentage Required</span>
</div>
<div class = "form-group col-lg-6">
<label>12<sup>th</sup>-Percentage</label>
<input type = "number"
name = "twelve"
ng-required = "true"
ng-model = "stdCtrl.twelfth"
class = "form-control"
placeholder = "12th percentage">{{x.twelfth}}</input>
<span class = "help-block"
ng-show = "logForm.twelve.$invalid && !logForm.twelve.$pristine">12th-percentage Required</span>
</div>
<div class = "form-group col-lg-6">
<input type = "submit"
id = "btn"
ng-disabled = "!logForm.$valid"
name = "Nextpage"
class = "form-control"
value = "Update" />
</div>
<div id = "form-group" class = "col-lg-6">
<input type = "submit"
name = "Cancel"
id = "btn1"
ng-click = "CancelForm()"
ng-disabled = "!logForm.$valid"
class = "form-control"
value = "Cancel" />
</div>
</form>
</div>
<script>
var app = angular.module('MyForm',[])
app.controller('StudentControl',['$scope','$http',function($scope,$http){
this.StudentCtrl = function(){
alert("bye");
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
var fType = JSON.parse(decodeURIComponent(this.StudentCtrl()['data']));
console.log(fType);
$scope.fType = fType;
}]);
$(function(){
$("#birthdayPicker").datepicker({
dateFormat: "yy-mm-dd",
yearRange: '1980:2017',
changeMonth: true,
changeYear: true
});
});
</script>
</body>
</html>
What Im trying to do is Im getting the json object data in the above code but I have no idea to how to assign to my form fields. Please give a suggestion guys
2 answers
solution1
1 ACCPTED 2016-03-30 09:50:04
Your variables are in $scope.stdCtrl , try to console.log that
this.StudentCtrl = function() {
console.log($scope.stdCtrl);
}
solution2
0 2016-03-30 10:15:34
Try to pass the object in ng-submit like this:
<form name = "logForm" class = "col-lg-12" novalidate ng-repeat = "x in fType" ng-submit = "stdCtrl.StudentCtrl(stdCtrl)">
Or
Why not simply define a function inside the StudentCtrl like this
$scope.submitFunc = function(stdCtrl){
console.log(stfCtrl);
}
And change your form tag like this:
<form name = "logForm" class = "col-lg-12" novalidate ng-repeat = "x in fType" ng-submit = "submitFunc(stdCtrl)">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Pass JSON Object to angular directive
Pass JSON object from Angular service to directive
Angular 2 pass JSON object to new window
In Angular, how to pass JSON object/array into directive?
How to pass JSON object to angular custom elements
Angular 2 - Http Get request - pass json Object
Show property form json object with angular http
Angular - Spring : how to pass file + json object to WS?
how to pass a json object from html form submit
Pass by Value in JSON in angular
Related Tags