我有一个向数据库添加记录的功能。 我需要做的是当我选择一个选项时,所有必填字段都必须填充数据。
我是angularjs的新手,想学习如何做到这一点。
下面是我的代码。
模板
<div class="col-md-10">
<div class="col-md-12">
<div class="form-group">
<label>Select Employee </label>
<select class="form-control" ng-change='getData()' id='empId' ng-model="empId" ng-options="opt.id as opt.value for opt in employees">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Department <i class="required">*</i></label>
<select class="form-control" ng-change ="getPos()" ng-model="data.Employee.departmentId" ng-options="opt.id as opt.value for opt in deparments" data-validation-engine="validate[required]">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Position <i class="required">*</i></label>
<select class="form-control" ng-model="data.Employee.positionId" data-validation-engine="validate[required]">
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Rate <i class="required">*</i></label>
<input type="text" class="form-control" ng-model="data.Employee.rate" data-validation-engine="validate[required]">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Loan Amount <i class="required">*</i></label>
<input type="text" class="form-control" ng-model="data.Loan.amount" data-validation-engine="validate[required]">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Period (months) <i class="required">*</i></label>
<input type='text' class="form-control" ng-model="data.Loan.amount" data-validation-engine="validate[required]">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Date Start<i class="required">*</i></label>
<input type="text" class="form-control text-left" id="dateStart" ng-model="data.Employee.contractFrom" data-validation-engine="validate[required]" id="contractFrom">
</div>
</div>
</div>
控制器
app.controller('LoanAddController', function($scope, Loan,Select) {
$('#form').validationEngine('attach');
$scope.load = function() {
Loan.get({ id: $scope.employeeId }, function(e) {
$scope.data = e.data;
});
Select.get({ code: 'departments' }, function(e) {
$scope.departments = e.data;
});
// employees selection
Select.get({ code: 'employees' }, function(e) {
$scope.employees = e.data;
});
Select.get({ code: 'positions' }, function(e) {
$scope.positions = e.data;
});
}
$('#dateStart').datepicker({
format: 'mm/dd/yyyy',
autoclose: true
});
$scope.load();
// save loan data
$scope.save = function() {
valid = $("#form").validationEngine('validate');
if (valid) {
Loan.save($scope.data, function(e) {
if (e.ok) {
$.gritter.add({
title: 'Successful!',
text: e.msg,
});
window.location = '#/loans';
} else {
$.gritter.add({
title: 'Warning!',
text: e.msg,
});
}
});
}
}
});
一些JSON数据
{
"ok": true,
"data": [
{
"Loan": {
"id": "1",
"employeeId": "9",
"dateApplied": "2015-10-15",
"amount": "5000",
"period": "6",
"startdate": "2015-11-01",
"status": "pending",
"visible": true,
"created": "0000-00-00 00:00:00",
"modified": "0000-00-00 00:00:00"
},
"Employee": {
"id": "9",
"employeeNumber": "24681012",
"lastName": "Cortez",
"firstName": "Kim Carlo",
"middleName": "Mira",
"departmentId": "1",
"positionId": "4",
"rate": "600",
"typeId": "8",
"dateHired": "2015-10-22",
"contractFrom": "2015-10-31",
"contractTo": "2016-10-31",
"image": "9.PNG",
"visible": true,
"created": "2015-10-07 08:25:56",
"modified": "2015-10-07 08:25:56"
},
"Department": {
"id": null,
"code": null,
"name": null,
"description": null,
"visible": null,
"created": null,
"modified": null
},
"Position": {
"id": "9",
"name": "Bell boy",
"departmentId": "6",
"description": "bellboy, ice cream vendor",
"visible": true,
"created": "2015-10-06 13:52:43",
"modified": "2015-10-06 13:52:43"
}
}
],
"paginator": {
"page": 1,
"current": 1,
"count": 1,
"prevPage": false,
"nextPage": false,
"pageCount": 1,
"order": {
"Loan.id": "ASC"
},
"limit": 25,
"options": [
],
"paramType": "named"
}
}
我必须在字段中填写员工详细信息。 任何帮助将不胜感激。
谢谢你们,