У меня есть многоступенчатая форма, каждый шаг имеет btn-link
для перехода к следующему шагу. Я достигаю этого с помощью угловых маршрутов таким образом:
<button ui-sref="next.step" class="btn btn-link"></button>
На одном из шагов в середине всей формы мне нужно отправить данные, поэтому мне нужна уже описанная кнопка, чтобы отправить форму, а также, только если форма может быть представлена, а затем перейдите к следующему шагу. Я пытался это сделать, но он не работает, потому что он перенаправляется на следующий шаг, не заботясь о форме
<button ui-sref="next.step2" type="submit" class="btn btn-link"></button>
Как я могу достичь этого с помощью углового?
вам не нужно использовать ui-sref для вашей следующей кнопки, вместо этого используйте $state
service от вашего контроллера, как показано ниже
Код HTML
<form ng-submit="onFormSubmission($event)">
<button type="submit" class="btn btn-link"></button>
</form>
контроллер
var successCallback = function(response) {
//process response
$state.go("next.step2");
}
$scope.onFormSubmission = function($event) {
var data = getFormData();
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
}
Используйте ng-submit
чтобы отправить форму и показать какое-то загружаемое сообщение, когда форма сохраняется, используйте $http
для отправки данных и успеха, чтобы перейти к следующему маршруту с помощью $state.go
.
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', '$state', function($scope, $state) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
$http.get('/aveData', config).then(function(response){
$state.go('next.step2')
}, function(){
alert('error saving data');
});
};
}]);
</script>
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>
$event
в функцию?