表單提交的模態窗口和刷新選項卡的內容

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> 

我的問題是;我怎樣才能將我的編輯表單以模式形式提交給目標網址並刷新品牌列表。

Answer 1

角度，形式有一個內置的事件，稱爲ng-submit。您可以通過提交按鈕或使用回車鍵以任一方式提交表格。在ng-submit event，你需要通過一個function，它必須寫在你的controller。在那個控制器中，你可以做任何你想做的事情。要使用服務，請閱讀文檔。

這裏我附上表的工作示例提交與整合IT服務（僅供參考，我已經添加了這些共享相同的服務2個不同的控制器）：

小提琴：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(); 
     }) 
}