如何在 angular 中使用 ui-sref 创建提交按钮

Question

我有一个多步骤表单，每个步骤都有一个 btn-link 来移动到下一步。我通过 angular 路由以这种方式实现了这一点：

<button ui-sref="next.step" class="btn btn-link"></button>

在整个表单中间的一个步骤中，我需要提交数据，所以我也需要已经描述的按钮来提交表单，只有当表单可以提交时才转到下一个步。我试过这样做但它不起作用，因为它重定向到下一步而不关心表单

<button ui-sref="next.step2" type="submit" class="btn btn-link"></button>

如何使用 angular 实现此目的？

Answer 1

您 不需要为您的下一个按钮使用 ui-sref，而是使用来自控制器的 $state 服务，如下所示

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

}

Answer 2

使用 ng-submit 提交表单并在保存表单时显示一些加载消息，使用 $http 到 post 数据并成功将用户带到下一条路线使用$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>

如何在 angular 中使用 ui-sref 创建提交按钮

How to create a submit button with ui-sref in angular

html

forms

submit

angularjs