angularjs - Form Submission in Modal Window and Refresh Content of a Tab -
i have 2 tabs: 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 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> i switch them
<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> at list, can open modal window contains brand details clicking edit button in list.brands. modal window:
<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> and app here:
<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> my questions is; how can submit edit form in modal target url , refresh list of brands.
in angular, form has in-built event called ng-submit. can submit form in either way via submit button or using enter key. on ng-submit event, need pass function must written within controller. in controller can ever want do. use service, go through documentation.
here attaching working example of form submit service integrated in (just reference, have added 2 different controllers sharing same service):
Comments
Post a Comment