javascript - Uib-tabset - http 成功时更改

Question

我有模式框，在模式框中我有选项卡。在第一个选项卡上，我需要选择项目，并在单击“下一步”按钮时将其分配给用户。如果成功，将自动更改下一个选项卡，其中该选项卡的配置。如果服务器响应错误，请留在同一选项卡上。

这是我的模态框 html

<div class="modal fade" id="myModal2" data-toggle="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 650px;">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <uib-tabset active="active">
                    <uib-tab index="0" heading="Select benches">

                        <div class="modal-body">
                            <label for="type" class="col-sm-3 control-label">Selected buyers: </label>someone@gmail.com

                            <div class="tablicaPridruzivanjeKlupaKlijentu">
                                <div style="padding-top: 10px;">
                                    <button ng-click="oznaciSve()" ng-model="option">check all</button>
                                    <button ng-click="odznaciSve()">uncheck all</button>
                                </div>
                                <form name="addingBench">
                                    <table class="table" style="width: 100%">
                                        <thead>
                                            <tr class='active'>
                                                <th>Select items</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="bench in freeBenchesForDistributors">
                                                <th>
                                                    <input type="checkbox" checklist-model="selected.freeBenchesForDistributors" checklist-value="bench.id">
                                                    {{items.id}}
                                                </th>
                                            </tr>
                                        </tbody>
                                    </table>
                                </form>
                            </div>
                        </div>
                    </uib-tab>
                    <uib-tab index="1" heading="Config">
                        <h6 style="padding-left: 10px;"><b>Info}</b></h6>
                        <form editable-form name="tableformConfig" shown="true" onaftersave="sendBenchAndConfigDistributors()" oncancel="cancel()">
                            <table class="table tableDistributorConfig col-sm-12" style="width: 100%">
                                <thead>
                                <th>
                                    <button type="button" class="btn btn-default" ng-show="!tableformConfig.$visible" ng-click="tableformConfig.$show()">
                                        Edit
                                    </button>
                                </th>
                                </thead>

                                <thead> 
                                <th>
                                    <button type="submit" ng-show="tableformConfig.$visible" ng-disabled="tableformConfig.$waiting" class="btn btn-primary">
                                        Save
                                    </button>
                                </th>
                                </thead>

                            </table> 
                        </form>
                    </uib-tab>
                </uib-tabset>
                <div class="modal-footer">
                    <button ng-hide="enable" type="button" class="btn btn-default btn-sm" ng-click="active = 1; change(); itemsForClient()">Next</button>
                    <button ng-click="changeBackNext()" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>

    </div>

和我的 Controller

$scope.itemsForClient = function () {
        var data = [];
        angular.forEach($scope.selected.freeItemsForDistributors, function (key, value) {
            data.push({id: key, distributor: $rootScope.selectedDistributorsIdForAddingItems});
        });
        var json = JSON.stringify(data);
        var config = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-HTTP-Method-Override': 'PATCH'
            }
        };

        $http.post(serviceBase + 'control-board/items/bulk', data, config)
                .success(function (data, status, headers, config) {
                    Notification.success({message: $filter('translate')('ITEMS_ADDED_SUCCESSFULLY'), delay: 3000, positionY: 'bottom', positionX: 'right'});
                })
                .error(function (data, status, header, config) {
                    Notification.error({message: $filter('translate')('ITEMS_ADDED_ERROR'), positionY: 'bottom', positionX: 'right'});
                });
    };

谢谢

Answer 1

请进行以下更改

在 View 中将“下一步”按钮更改为

 <button ng-hide="enable" type="button" class="btn btn-default btn-sm" ng-click="change(); itemsForClient()">Next</button>

而不是

 <button ng-hide="enable" type="button" class="btn btn-default btn-sm" ng-click="active = 1; change(); itemsForClient()">Next</button>

并将 $http.post 更新为如下

$http.post(serviceBase + 'control-board/items/bulk', data, config)
                .success(function (data, status, headers, config) {
                     $scope.active = 1;
                    Notification.success({message: $filter('translate')('ITEMS_ADDED_SUCCESSFULLY'), delay: 3000, positionY: 'bottom', positionX: 'right'});
                })
                .error(function (data, status, header, config) {
                    Notification.error({message: $filter('translate')('ITEMS_ADDED_ERROR'), positionY: 'bottom', positionX: 'right'});
                });
 };