将不同形式的选项卡作为一种形式处理

Question

我有一个表单分为不同的选项卡。这些由UI路由器处理：

$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>

在click事件之后我控制器的方法，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

好，我想我可以看到你想要达到的目的。 但在我进入它之前，看看你的初始解决方案，你应该考虑使用 insend ng-class。

无论如何，目前的问题。 您希望在多个视图之间共享一个模型，但只有一个提交按钮可处理所有视图。 如果你想使用视图，那么你应该使用服务来保存你的模型。 否则，采取您的第一个状态设置，您可以共享父状态的控制器与子状态。

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

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