Question

我正在使用AngularJS + ui-router制作一些带有嵌套表格和路线的向导。

这是主要形式：

    <div  id="form-container-wizard">
        <div class="form-horizontal" role="form">
            <form name="addItem_form"  ng-submit="submitForm()">


                <div class="page-header text-center">
                    <h2>Post Your Item</h2>

                    <!-- the links to our nested states using relative paths -->
                    <!-- add the active class if the state matches our ui-sref -->
                    <div id="status-buttons-wizard" class="text-center">
                        <a ng-class="{ disabled: ItemCheckPass }" ui-sref-active="active" ui-sref=".item"> <span></span>Item</a>
                        <a ng-class="{ disabled: !ItemCheckPass || LocationCheckPass}" ui-sref-active="active" ui-sref=".location"><span></span>Location</a>
                        <a ng-class="{ disabled: !ItemCheckPass || !LocationCheckPass || AccountCheckPass}"ng-show="!IsAuthenticated" ui-sref-active="active" ui-sref=".account"><span></span>Account</a>
                        <a ng-class="{ disabled: !ItemCheckPass || !LocationCheckPass || !IsAuthenticated && !AccountCheckPass }"ui-sref-active="active" ui-sref=".social"><span></span>Social</a>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div id="form-views" ui-view></div>
                </div>

            </form>
        </div>
    </div> <!-- wizard container -->

这是表单的路由：

    .state('post_add', {
        url: '/post_add',
        templateUrl: '/view/post_wizard/form.html',
        controller: 'postWizardMainController',
        abstract:true
    })
    .state('post_add.item', {
        url: '',
        templateUrl: '/view/post_wizard/form-item.html',
        controller: 'postWizardController'
    })
    .state('post_add.location', {
        url: '/location',
        templateUrl: '/view/post_wizard/form-location.html',
        controller: 'postWizardController'
    })
    .state('post_add.account', {
        url: '/account',
        templateUrl: '/view/post_wizard/form-account.html',
        controller: 'postWizardController'
    })
    .state('post_add.social', {
        url: '/social',
        templateUrl: '/view/post_wizard/form-social.html',
        controller: 'postWizardController'
    });

每个视图都包含一个部分表单，并使用像$scope.AddItem

这样的ng模型将表单元素值存储到<input type="email" class="form-control" name="email" ng-model="AddItem.email" ng-minlength=3 ng-maxlength=30 required>对象

postWizardMainController用于保存验证变量和方法。

所以，问题是：

选项1：代码如下所示，<form name="addItem_form" ng-submit="submitForm()">未在位于最后一个表单视图中的<input type="submit" ng-disabled="addItem_form.$invalid" class="btn btn-orange" value="Post An Ad">提交。

选项2 ：我将submitForm()放入最后一个表单中的ng-click，然后在submitForm()中找到postWizardMainController函数。在此选项中，将调用submitForm()函数，不会将任何对象传递给它。 $scope.AddItem为undefined。

所以，问题是： 如何提交表单并将$scope.AddItem对象传递给提交，其中必须包含所有嵌套表单中的数据。

Answer 1

解决方案是在$scope.AddItem = {}

中声明postWizardMainController

AngularJS ui-router表单提交

1 个答案: