模态窗口中的表单提交和选项卡的内容刷新

Question

我有2个标签：list.brands和add.brand：

<script type="text/ng-template" id="list.brands">
        <table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-controller="BrandsCtrl">
                    <input type="text" ng-model="searchBox">
                    <thead>
                    <tr>
                        <th><tags:label text="brandid"/></th>
                        <th><tags:label text="name"/></th>
                        <th><tags:label text="isactive"/></th>
                        <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="actionresult{{$index + 1}}" ng-repeat="brand in brands | filter:searchBox">
                            <td>{{brand.brandid}}</td>
                            <td>{{brand.name}}</td>
                            <td>{{brand.isactive}}</td>

                            <td>
                            <a class="btn btn-ext-darkblue btn-ext-darkblue savestockbtn" ng-click="open(brand.brandid)"><tags:label text="edit"/></a>
                            <a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/deleteConfirm?brandid={{brand.brandid}}" data-toggle="modal" ><tags:label text="delete"/></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
    </script>


    <script type="text/ng-template" id="add.brand">
    <div class="row-fluid sortable">
        <div class="box span12">
            <div class="box-content">
                <form class="form-horizontal" action='/admin.brands/add' data-toggle="modalform" data-popup="modal" name="brandform">
                        <div class="section-heading"></div>
                        <div class="control-group">
                            <label class="control-label" for="selectError"><tags:label text="name"/> *</label>
                            <div class="controls">
                                <input name="name" required/>
                                <span ng-show="brandform.name.$error.required"> Name is required. </span>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
                            <div class="controls">
                                <input type="checkbox" name="isactive" value="1">
                            </div>
                        </div>
                        <div class="section-heading"><tags:label text="logo"/></div>
                        <div class="control-group">
                            <label class="control-label" for="textarea2"></label>
                            <div class="controls">
                                <template:file.upload dropzoneWidth="200px" dropzoneHeight="160px" maxFiles="1"></template:file.upload>
                            </div>
                        </div>
                        <div class="form-actions">
                            <a href="/admin.brands" class="btn btn-ext-darkblue"><tags:label text="close"/></a>
                            <button ng-disabled="brandform.name.$invalid" type="submit" class="btn btn-ext-lightblue"><tags:label text="save"/></button>
                        </div>
                </form>
            </div>
        </div>
    </div>
    </script>

我用

切换它们

<div class="content-header">
                <div class="row">
                    <div class="content-name span4">
                        <h3><i class="glyphicon glyphicon-bold"></i><tags:label text="brands"/></h3>
                    </div>
                    <div class="span8 button-group">
                        <jsp:include page="/admin/jsp/screens/help-button-inc.jsp"></jsp:include>
                    </div>
                </div>
            </div>
            <div ng-app="myApp" ng-controller="TabsCtrl">
             <div id="tabs" >
                <ul class="nav nav-tabs content-tab-header" id="content_tab_0">

                    <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)"><a><i class="{{tab.cssClass}}"></i><tags:label text="{{tab.title}}"/></a></li>
                </ul>

             </div>
             <div id="mainView">
                <div ng-include="currentTab"></div>
             </div>

在列表中，我可以通过单击list.brands中的编辑按钮打开包含品牌详细信息的模态窗口。我的模态窗口：

<div class="row-fluid sortable">
    <div class="box span12">
        <div class="box-content">
        <form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
            <fields:form formName="brand.id.form"> 
                <input type="hidden" name="brandid" value="{{item.brandid}}"/>
            </fields:form> 
            <fields:form formName="brand.form">  
                <div class="section-heading"></div>
                <div class="control-group">
                    <label class="control-label" for="selectError"><tags:label text="name"/> *</label>
                    <div class="controls">

                        <input name="name" value="{{item.name}}" required/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
                    <div class="controls">
                        <input type="checkbox" ng-checked="item.isactive" name="isactive" value="1"/>

                    </div>
                </div>
            </fields:form> 
                <div class="form-actions">
                    <a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
                    <a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
                </div>
        </form>
    </div>
</div>
</div>

我的应用就在这里：

<script>
var app = angular.module('myApp', ['ui.bootstrap']);

app.controller("BrandsCtrl", function($scope, $http, $controller) {
      $http.get('/admin.brands/getJSONDataOfSearch').
        success(function(data, status, headers, config) {
          $scope.brands = data;
        }).
        error(function(data, status, headers, config) {

        });
      angular.extend(this, $controller("BrandCtrl", {$scope: $scope}));
    });

app.controller("BrandCtrl", function ($scope, $http, $modal) {
    $scope.animationsEnabled = true;
    $scope.open = function (id) {
        var modalInstance = $modal.open({
            animation: $scope.animationsEnabled,
            templateUrl: '/admin.brands/edit',
            controller:gg,
            resolve: {
                item: function($http) {
                    return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
                        .then(function(response) {
                            return response.data;
                        });
                }
            }
        });
    }
});

var gg = function ($scope, $modalInstance, item) {
    $scope.item  =  item;
    $scope.ok = function () {
        $scope.form.brandform.submit();
        $modalInstance.close();
      };

      $scope.cancel = function () {

        $modalInstance.dismiss();
      };
}
app.controller('TabsCtrl', ['$scope', function ($scope) {
    $scope.tabs = [{
            title: 'list.brands',
            url: 'list.brands',
            cssClass: 'icon-th-list'
        }, {
            title: 'add.brand',
            url: 'add.brand',
            cssClass: 'icon-plus'
    }];
    $scope.currentTab = 'list.brands';
    $scope.onClickTab = function (tab) {
        $scope.currentTab = tab.url;
    }
    $scope.isActiveTab = function(tabUrl) {
        return tabUrl == $scope.currentTab;
    }
}]);

</script>

我的问题是;如何将模态中的编辑表单提交到目标URL并刷新品牌列表。

Answer 1

在angular，form中有一个名为ng-submit的内置事件。您可以通过提交按钮或使用回车键以任一方式提交表单。在ng-submit event上，您需要传递function，该controller必须写在var canvas; var ctx; var ball; var numBalls = 5; var balls = []; function Ball(radius, color) { this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.radius = radius; this.color = random_color(); } Ball.prototype.draw = function (ctx) { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true); ctx.closePath(); ctx.fill(); }; function random_color() { var letter = "0123456789ABCDEF".split(""); var color = "#"; for(var i = 0; i < 6; i++){ color += letter[Math.round(Math.random()*15)]; } return color; } function init() { canvas = document.getElementById("gameCanvas"); ctx = canvas.getContext("2d"); for (var i = 0; i<numBalls; i++){ ball = new Ball(Math.random() * 40 + 5, Math.random() * 0xffffff); ball.x = Math.random() * canvas.width / 2; ball.y = Math.random() * canvas.height / 2; ball.vx = Math.random() * 6 - 3; ball.vy = Math.random() * 6 - 3; ball.draw(ctx); balls.push(ball) } animFrame(); } function animFrame() { requestAnimationFrame(animFrame, canvas); ctx.clearRect(0, 0, canvas.width, canvas.height); for(var i = 0; i < numBalls; i++){ var ball = balls[i]; ball.x += ball.vx; // Undefined here down. ball.y += ball.vy; if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) ball.vx = -ball.vx; if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) ball.vy = -ball.vy; ball.draw(ctx); } } 中。在那个控制器中，你可以做你想做的事。要使用服务，请阅读文档。

这里我附上了一个表单提交的工作示例，其中集成了服务（仅供参考，我添加了两个不同的控制器共享相同的服务）：

小提琴：http://jsfiddle.net/ashishanexpert/zvcx5z38/2/

Answer 2

我认为这可以帮到你。感谢

$scope.open = function (id) {
    var modalInstance = $modal.open({
        animation: $scope.animationsEnabled,
        templateUrl: '/admin.brands/edit',
        controller:gg,
        resolve: {
            item: function($http) {
                return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
                    .then(function(response) {
                        return response.data;
                    });
            }
        }
    });
modalInstance.result.then(function (item) {
        //The function that load your data in this controller   
        LoadData();
        })
}