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:&nbsp&nbsp&nbsp</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

What is there in your html code? post your html code in question. — Jenish Rabadiya
– Jenish Rabadiya, Commented Mar 30, 2016 at 9:33

michelem · Accepted Answer · 2016-03-30 09:57:37Z

1

Your variables are in $scope.stdCtrl, try to console.log that

this.StudentCtrl = function() {
    console.log($scope.stdCtrl);
}

JSFiddle

edited Mar 30, 2016 at 9:57

answered Mar 30, 2016 at 9:50

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

trying... Over a year ago

it says Object { StudentCtrl=function()} and when I open it says undefined

trying... Over a year ago

still it says undefined. I tried the way you did in the fiddle and my problem is the ng-repeat datas are displayed outside the text-field boxes.

trying... Over a year ago

Firstly I can submit my form when I give a new entry. But when I get the details back from the url through ng-repeat I'm having problem with displaying it.(It displays outside the text field) all other things seems to be fine

Ahmad hamza · Accepted Answer · 2016-03-30 10:15:34Z

0

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)">

answered Mar 30, 2016 at 10:15

Ahmad hamza

1,9361 gold badge23 silver badges49 bronze badges

2 Comments

trying... Over a year ago

Firstly I can submit my form when I give a new entry. But when I get the details back from the url through ng-repeat I'm having problem with displaying it.(It displays outside the text field) all other things seems to be fine

Ahmad hamza Over a year ago

Can you share some screenshot ?

Collectives™ on Stack Overflow

pass the json object to angular form

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related