Total Pageviews

2015/03/12

[AngularJS] How to popup modal dialog as I click row in ng-grid

Requirement
I am using ng-grid to implement data grid.
If user click "利率明細" in each row in ng-grid


it should open a modal dialog.

 Solution
The code should be like this:  
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 $scope.dbm100eFormGrid2 = {
         data : 'dbm100eFormGrid2Data',
         selectedItems: $scope.grid2SelectedRow,
         columnDefs : [
                       { field : 'budgetCode',  displayName : '預算別', 
                         width: 0, cellClass: 'text-left', visible:false},
                       { field : 'diversityAmount',  displayName : '溢(折)價金額', 
                         width: 0, cellClass: 'text-left', visible:false},
                       { field : 'issueCostAmount',  displayName : '發行成本額', 
                         width: 0, cellClass: 'text-left', visible:false},
                       { field : 'budgetName',  displayName : '預算別', 
                         width: 150, cellClass: 'text-left'},
                       { field : 'debtCode',    displayName : '債務別', 
                         width: 0, cellClass: 'text-left'}, 
                       { field : 'debtName',    displayName : '債務別', 
                             width: 150, cellClass: 'text-left'}, 
                       { field : 'issueAmount', displayName : '發行額', 
                         width: 180, cellClass: 'text-right', cellFilter: 'number'}, 
                       { field : 'realAmount',  displayName : '實收額', 
                         width: 180, cellClass: 'text-right', cellFilter: 'number'},
                       { field : 'rateDtl',    displayName : '利率%',  
                         width: 170, cellClass: 'text-left',
                         cellTemplate: '<div class="ngCellText" ng-click="showRateDtl(row);"><a>利率明細</a></div>'}],
         enableColumnResize :true,
         i18n:'zh-tw',
         multiSelect : false,
         afterSelectionChange: function (row, event) {
             if(!angular.isUndefined($scope.grid2SelectedRow[0])){
                //...
             }
         }
 };
 $scope.showRateDtl = function(row){
     openDialogForTab2(row);
 };
 
 var openDialogForTab2 = function(row){
     var options = {
             templateUrl: 'dbm100eTab4.html',
             controller: ModalInstanceCtrl,
             windowClass: 'app-modal-window',
             backdrop: true,
             keyboard: true,
             backdropClick: true,
             resolve: {
                 model: function(){
                     return row.entity;
                 }
             }
     };

     var modalInstance = $modal.open(options);
     
     modalInstance.result.then(function (model) {
         //...
       });
     
 };
 
 var ModalInstanceCtrl = function($scope, $modalInstance, model) {
     $scope.dbm100eTab4FormBean = angular.copy(model);
     
     //...
     
     $scope.dbm100eFormGrid4 = {
             data : 'dbm100eFormGrid4Data',
             selectedItems: $scope.grid4SelectedRow,
             columnDefs : [
                           { field : 'effcDateB', displayName : '實施日期起', width: 283, cellClass: 'text-left'},
                           { field : 'effcDateE', displayName : '實施日期迄', width: 283, cellClass: 'text-left'},
                           { field : 'debtRate',  displayName : '利率%', width: 283, cellClass: 'text-left'}],
             enableColumnResize :true,
             i18n:'zh-tw',
             multiSelect : false
     };
 };

Reference
[1] http://stackoverflow.com/questions/28201723/angular-ui-grid-double-click-row-to-open-pop-up-for-editing-a-row
Posted by Albert Kuo at 5:03 PM
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)