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>

在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

好吧我想我能看到你想要达到的目标。但是在我进入它之前，看看你的初始解决方案，你应该考虑使用ui-sref-active="active" ng-class {/ 1}}。{/ p>

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

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

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

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

1 个答案: