我在提供表单中的预加载器时遇到问题。我已经按照this教程在我的laravel项目中创建了一个多步骤表单。
这是我的基本 form.html :
<form id="appointment-form" name="appointmentform" ng-submit="processForm(appointmentform.$valid)">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
我的第一步表单是 form.license.html :
<!-- form-license.html -->
<label>Nummerplaat ingeven</label>
<div class="form-group">
<div class="col-xs-8 col-xs-offset-2">
<input required type="text" class="form-control" name="license" ng-model="formData.license">
</div>
</div>
<div class="form-group row">
<div class="col-xs-4 col-xs-offset-4">
<a ng-click="next(1)" ui-sref="form.profile" ng-disabled="!licenseValidated" class="btn btn-next btn-block">
Volgende
</a>
</div>
</div>
在我的控制器中,我有以下内容:
$scope.next = function(step){
if(step == 1) // licensePlate
{
// receive customer data
$http.post('/api/licenseplate', { license: $scope.formData.license })
.success(function(data, status, headers, config){
var item = data.item;
console.log(item);
if(item) // fill in the name, address, email and telephone number
{
$scope.formData.profile.name = item.owner_name;
$scope.formData.profile.street = item.owner_street;
$scope.formData.profile.zipcode = item.owner_zipcode;
$scope.formData.profile.city = item.owner_city;
$scope.formData.profile.email = item.owner_email[0];
$scope.formData.profile.telephone = item.owner_tel_no[0];
}
})
.error(function(data, status, headers, config) {
console.log("Data: " + data +
"<hr />status: " + status +
"<hr />headers: " + headers +
"<hr />config: " + config);
});
}
else if(step == 2)
{
// save customer data
// get calendar appointments
var current_date = (m+1) + '/' + d + '/' + y;
$http.post('/api/calendar', { date: current_date })
.success(function(data, status, headers, config){
console.log(data);
var item = data.items.item;
item.sort(function(a, b) {
return a.column_id - b.column_id;
});
$scope.calendarData.pop();
$scope.calendarData.push(item);
})
.error(function(data, status, headers, config) {
console.log("Data: " + data +
"<hr />status: " + status +
"<hr />headers: " + headers +
"<hr />config: " + config);
});
}
};
// function to process the form
$scope.processForm = function(isValid) {
var appointment_date = $scope.formData.appointment_date;
var appointment_hour = $scope.formData.appointment_hour;
var column_id = $scope.formData.column_id;
var profile = $scope.formData.profile;
$http.post('/api/agendainsert', { appointment_datetime: appointment_date + appointment_hour, profile: profile, column_id: column_id })
.success(function(data, status, headers, config){
$location.path('/form/success/');
})
.error(function(data, status, headers, config) {
console.log("Data: " + data +
"<hr />status: " + status +
"<hr />headers: " + headers +
"<hr />config: " + config);
});
};
正如您所看到的,当步数等于1时,我会生成$http.post
。现在,当我点击下一步第二个表单直接加载时。如果http.post成功加载,只想转到第二种形式。
我尝试过使用一些angularjs预加载器库($ http),但没有任何效果。有人在如何提供这个方面有一个很好的例子吗?
答案 0 :(得分:1)
您可以从控制器重定向到状态form.profile
:
<div class="col-xs-4 col-xs-offset-4">
<button ng-click="next(1)" ng-disabled="!licenseValidated" class="btn btn-next btn-block">
Volgende
</button>
</div>
并在控制器中
$scope.next = function(step){
if(step == 1) // licensePlate
{
// receive customer data
$http.post('/api/licenseplate', { license: $scope.formData.license })
.success(function(data, status, headers, config){
var item = data.item;
if(item) // fill in the name, address, email and telephone number
{
$scope.formData.profile.name = item.owner_name;
$scope.formData.profile.street = item.owner_street;
$scope.formData.profile.zipcode = item.owner_zipcode;
$scope.formData.profile.city = item.owner_city;
$scope.formData.profile.email = item.owner_email[0];
$scope.formData.profile.telephone = item.owner_tel_no[0];
}
// go to form.profile
$state.go('form.profile');
})
.error(function(data, status, headers, config) {
console.log("Data: " + data +
"<hr />status: " + status +
"<hr />headers: " + headers +
"<hr />config: " + config);
});
}
else {
...
}
}