javascript - 将不同的表单选项卡作为一个表单处理

Question

我有一个分为不同选项卡的表单。这些由 ui-router 处理:

$stateProvider.state('articledetail', {
  url: '/articledetail/:article',
  templateUrl: '/articledetail/articleDetail.html',
  controller: 'articleDetailController',
  controllerAs: 'vm'
})
.state('articledetail.tab1', {
  url: '/tab1',
  templateUrl: '/articledetail/tab1.html'
})
.state('articledetail.tab2', {
  url: '/tab2',
  templateUrl: '/articledetail/tab2.html'
})
.state('articledetail.tab3', {
  url: '/tab3',
  templateUrl: '/articledetail/tab3.html'
})
.state('articledetail.tab4', {
  url: '/tab4',
  templateUrl: '/articledetail/tab4.html'
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form class="form-horizontal" name="editForm" novalidate>
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" ng-class="{active: vm.$state.current.name == 'articledetail.tab1'}"><a ui-sref="articledetail.tab1" aria-controls="tab1" role="tab" data-toggle="tab">Algemene info</a></li>
    <li role="presentation" ng-class="{active: vm.$state.current.name == 'articledetail.tab2'}"><a ui-sref="articledetail.tab2" aria-controls="tab2" role="tab" data-toggle="tab">Info 2</a></li>
    <li role="presentation" ng-class="{active: vm.$state.current.name == 'articledetail.tab3'}"><a ui-sref="articledetail.tab3" aria-controls="tab3" role="tab" data-toggle="tab">Info 3</a></li>
    <li role="presentation" ng-class="{active: vm.$state.current.name == 'articledetail.tab41'}"><a ui-sref="articledetail.tab4" aria-controls="tab4" role="tab" data-toggle="tab">Info 4</a></li>
  </ul>
  <div class="tab-content col-xs-7">
    <div ui-view></div>
    <br />

    <div class="col-xs-7">
      <button class="btn btn-primary pull-right" ng-disabled="editForm.$invalid" ng-click="vm.test(editForm)">Artikelgegevens aanpassen</button>
    </div>
  </div>
</form>

在单击事件之后的 Controller 方法中，editForm 仅包含显示的选项卡的字段，而不包含其他选项卡的字段。但是，我希望有一个提交按钮来处理来自不同选项卡的所有字段。

是否有一种(简单的)方法可以实现这一目标？

编辑: 这是我现在的路线:

    $stateProvider.state('articledetail', {
        url: '/articledetail/:article',
        templateUrl: '/articledetail/articleDetail.html',
        controller: 'articleDetailController',
        controllerAs: 'vm',
        views: {
            'tab1': {
                templateUrl: '/articledetail/tab1.html'
            },
            'tab2': {
                templateUrl: '/articledetail/tab2.html'
            },
            'tab3': {
                templateUrl: '/articledetail/tab3.html'
            },
            'tab4': {
                templateUrl: '/articledetail/tab4.html'
            }
        }
        });

Answer 1

好的，我想我可以看到您想要实现的目标。 但在我开始之前，先看看您的初始解决方案，您应该考虑使用 ui-sref-active="active" 而不是 ng-class。

不管怎样，当前的问题。 您希望在多个 View 之间共享一个模型，但一个提交按钮可以处理所有这些。 如果你想使用 View ，那么你应该使用服务来保存你的模型。 否则，在您的第一个状态设置中，您可以与子状态共享父状态的 Controller 。

我已经设置了一个codepen给你看看。

http://codepen.io/r3plica/pen/OVgRmV