2
[https://drive.google.com/open?id=0B2PqgB8bPJ5xVmpjdTBOakdoTk0] это ссылка на изображение Это мой нг-приложение и контроллер моей формы:передать объект JSON в угловой форме
<!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>
Что Im пытается сделать это Im получать данные объекта JSON в приведенный выше код, но я не знаю, как назначить поля формы. Пожалуйста, дайте предложение ребята
$ scope.fType = FTYPE; –
Не работает –
Пожалуйста, проверьте консоль –